How to make proper use of rowDelegate and itemDelegate in TableView

  • Hi,
    I've got sore fingers from searching for an answer to this question but couldn't find any. So could anyone please explain to me how this whole delegate stuff works, especially in the context of TableView?
    So in my Application I use a TableView. The user should be able to select rows in order to operate on this rows. Displaying the model content and selecting rows (with the selected rows being highlighted) works just fine with the default delegates of TableView i.e. when I do not bind any custom components to itemDelegate or rowDelegate. Alas I also want the user to edit the contents in the table. So I added an itemDelegate with a TextEdit element in it. This worked fine except that at this point it was not possible to select rows anymore, I assume because the item Delegate overrides the rowDelegate somehow. To fix this I found some post suggesting to do it like this:

        Component {
            id: editableDelegate
            Item {
                Text {
                    width: parent.width
                    anchors.margins: 4
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    elide: styleData.elideMode
                    text: styleData.value !== undefined ? styleData.value : ""
                    color: styleData.textColor
                    visible: !styleData.selected
                Loader {
                    id: loaderEditor
                    anchors.fill: parent
                    anchors.margins: 4
                    Connections {
                        target: loaderEditor.item
                        onEditingFinished: {
                            if (!myModel.setData(styleData.row, myModel.getRoleKey(styleData.role),loaderEditor.item.text)) {
                                loaderEditor.item.text = styleData.value !== undefined ? styleData.value : ""
                    sourceComponent: styleData.selected ? editor : null
                    Component {
                        id: editor
                        TextInput {
                            id: textinput
                            color: styleData.textColor
                            text: styleData.value
                            MouseArea {
                                id: mouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                onClicked: textinput.forceActiveFocus()

    The model I use is a custom model based on QAbstractItemModel.
    With this somehow the selection of rows worked again I guess this is because the editor element is only loaded for an idividual cell and not for all of them. Since this solution seems also to be more efficient I kind of like it although I do not fully understand why the selection is working with this solution but not with the other one.
    Now I wanted to add Tooltips to the table rows. Since tooltips for tables are not supported yet I created a MouseArea showing the tooltip when triggered. When this is added to the editor component, tooltips are only shown when the row is selected which is not the result I want (but which was expected). When I add it outside of the loader component or create a second component that the loader shall load (replacing the null for sourceComponent above with the id ot the component) tooltips are shown like required but row selection has stopped working.
    Since the tooltip only refers to the row and not to the individual items in a row I could also create a rowDelegate the tooltip. But I want to keep all of the default behavior of the row delegate plus showing the tooltip. How can I achieve that? Do I have to reimplement the default behavior or can I somehow extend the default delegate? If so: How can I do this? If not: Where can I find the specification of the default rowDelegate of TableView so I can replicate the behaviour exactly?

    I have the feeling that I am missing some very basic parts of understaning how QML and QtQuick is supposed to work! Can someone please explain it to me?

  • Mmmh, 20 days and no answer at all!
    Maybe I should try to ask a simpler question
    Ok. Basically my question boils down to:

    • Is it possible to use the rowDelegate and the itemDelegate of a TableView at the same time such that both work as expected?
    • If the answer is yes, how?
    • If the answer is no ... maybe there is another way to achive what I want?

    Hope this makes my question more clear!

Log in to reply