How to add an onClick event to a QML TreeView

1
votes

I was implementing the example, shown at: http://imaginativethinking.ca/how-to-use-qt-quicks-treeview/

I want to add an event handler that reacts, if I click on a tree view item.

The following does not work:

    TreeView {
    anchors.fill: parent
    model: theModel
    itemDelegate: Rectangle {
               color: ( styleData.row % 2 == 0 ) ? "white" : "lightgrey"
               height: 20

               Text {
                   anchors.verticalCenter: parent.verticalCenter
                   text: styleData.value === undefined ? "" : styleData.value // The branches don't have a description_role so styleData.value will be undefined
               }
               // console.log("Saving the current project...");
           }

    TableViewColumn {
        role: "name_role"
        title: "Name"
        width: 110
    }
    TableViewColumn {
        role: "description_role"
        title: "Description"
        width: 570
    }
    onCurrentItemChanged: console.log("Running test..")
}

I get the error message:

Cannot assign to non-existent property "onCurrentItemChanged"

Any idea how to add such an event handler?

2
treeviewqml

2 Answers

1
votes

The following code works:

import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import ca.imaginativethinking.tutorials.models 1.0

Item {
    width: 480
    height: 410
    MyTreeModel {
        id: tests
    }
    // @disable-check M300
    TreeView {
        anchors.fill: parent
        model: tests
        itemDelegate: Rectangle {
                   color: ( styleData.row % 2 == 0 ) ? "white" : "lightgrey"
                   height: 20

                   Text {
                       anchors.verticalCenter: parent.verticalCenter
                       text: styleData.value === undefined ? "" : styleData.value // The branches don't have a description_role so styleData.value will be undefined
                   }
                   // console.log("Saving the current project...");
               }

        TableViewColumn {
            role: "name_role"
            title: "Name"
            width: 110
        }
        TableViewColumn {
            role: "description_role"
            title: "Description"
            width: 570
        }
        onClicked: {
            if (index.parent.row >= 0) {
                console.log(index.parent.row, index.row)
                console.log(tests.data(index))
            }
        }
    }

}

Instead of using onCurrentItemChanged I use the signal onClicked. I can access the index of the item with index.parent.row and index.row. I can access the content with tests.data(index), where tests is the name of the Model (was named theModel in the question).

1
votes

I think is better to include a mouse area inside your item delegate, so you can get the onlclick event in each item instead in the whole tree. Something like this:

    itemDelegate: MouseArea{
         Rectangle {
               anchors.fill: parent
               color: ( styleData.row % 2 == 0 ) ? "white" : "lightgrey"
               height: 20

               Text {
                   anchors.verticalCenter: parent.verticalCenter
                   text: styleData.value === undefined ? "" : styleData.value // The branches don't have a description_role so styleData.value will be undefined
               }
               // console.log("Saving the current project...");
           }

           onClicked: {
               console.log(styleData.index)
               console.log(tests.data(styleData.index))
           }
    }