Adding data to QML TreeView

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?

Mohammad Kanan Mohammad Kanan · Accepted Answer · 2019-09-11T20:11:20

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

Adding data to QML TreeView

1 Answers