Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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?
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).
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))
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.