Adding data to QML TreeView - qt

Question

I'm developing an application. I need to add data to TreeView but I have some problems with TreeView's nested model.
I created a List Model which is
ListModel {
id: fruitModel
ListElement {
name: "Apple"
price: 2.45
}
}
I am able to show this item by the way of
TreeView {
id: mytreeView
anchors.fill: parent
model: fruitModel
TableViewColumn {
title: "Name"
role: "name"
width: 200
}
TableViewColumn {
title: "Price"
role: "price"
width: 200
}
}
However , I need to show nested items like
ListModel {
ListElement {
categoryName: "Fruits"
collapsed: true
subItems: [
ListElement { itemName: "Orange" , itemPrice: 2.40},
ListElement { itemName: "Apple" , itemPrice: 2.40},
ListElement { itemName: "Pear" , itemPrice: 2.40},
ListElement { itemName: "Lemon" , itemPrice: 2.40}
]
}
}
I listed these items in ListView but I need to list these items in TreeView. So, how can I list this nested ListModel in TreeView using QML?

Answer 1

First, you need to correct the roles to match your new nested model/ListElement's scope/roles. And build your model correctly (you using "," for ListElement items .. use ";") as corrected below.
Second , use listmodel function object get(index) to iterate down and lockup the nested model.
THis will work!:
ListModel {
id:fruitModel
ListElement {
categoryName: "Fruits"
collapsed: true
subItems: [
ListElement { itemName: "Orange" ; itemPrice: 2.40},
ListElement { itemName: "Apple" ; itemPrice: 2.40},
ListElement { itemName: "Pear" ; itemPrice: 2.40},
ListElement { itemName: "Orange" ; itemPrice: 2.40}
]
}
ListElement {
categoryName: "Vegetable"
collapsed: true
subItems: [
ListElement { itemName: "Broccoli" ; itemPrice: 4.20},
ListElement { itemName: "Garlic" ; itemPrice: 7.40},
ListElement { itemName: "beens" ; itemPrice: 6.40},
ListElement { itemName: "Eggplant" ; itemPrice: 1.40}
]
}
}
TreeView {
id: mytreeView
anchors.fill: parent
model:fruitModel.get(0).subItems // get nested model this way , or by Javascript!
TableViewColumn {
title: "Name"
role: "itemName" // here
width: 200
}
TableViewColumn {
title: "Price"
role: "itemPrice" // here
width: 200
}
//Component.onCompleted: model= fruitModel.get(0).subItems
}
UpDate:
To display multiple nested elements , you can use section property with ListView and display nested model with TreeView :
ListView {
anchors.fill: parent
model: fruitModel
delegate: nameDelegate
focus: true
highlight: Rectangle {
color: "lightblue"
width: parent.width
}
section {
property: "categoryName"
criteria: ViewSection.FullString
delegate: Rectangle {
color: "#b0dfb0"
width: parent.width
height: childrenRect.height + 4
Text { anchors.left: parent.left
font.pixelSize: 16
font.bold: true
text: section
}
}
}
}
Component {
id: nameDelegate
TreeView {
id: mytreeView
width: parent.width
model:fruitModel.get(index).subItems // get nested model
TableViewColumn {
title: "Name"
role: "itemName" // here
width: 200
}
TableViewColumn {
title: "Price"
role: "itemPrice" // here
width: 200
}
}
}