How to add an onClick event to a QML TreeView - treeview

Question

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?

Answer 1

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).

Answer 2

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))
}
}