Change QML GridView model by javascript

I have one ListView and one GridView. Imagine it like this: The first view presents the categories and the second view presents article in each category. I want to dynamically change the data model of the GridView when the current index of the ListView change by javascript. How do we do that?

Answers


You simply need to assign a new model. Here's one example, based on the ListModel docs. This model shows the fruit in the model in the ListView on the left. When a delegate is clicked, it sets the model for the GridView on the right to the list defined by the attributes role.

import QtQuick 1.0

Item {
    width: 600; height: 400

    ListView {
        width: 300; height: 400
        model: fruitModel
        delegate: Text {
            font.pixelSize: 20
            text: name
            width: 300
            MouseArea {
                anchors.fill: parent
                onClicked: grid.model = attributes
            }
        }
    }

    GridView {
        id: grid
        x: 300; width: 300; height: 400
        delegate: Text {
            text: description
            font.pixelSize: 20
        }
    }

    ListModel {
     id: fruitModel

     ListElement {
         name: "Apple"
         cost: 2.45
         attributes: [
             ListElement { description: "Core" },
             ListElement { description: "Deciduous" }
         ]
     }
     ListElement {
         name: "Orange"
         cost: 3.25
         attributes: [
             ListElement { description: "Citrus" }
         ]
     }
     ListElement {
         name: "Banana"
         cost: 1.95
         attributes: [
             ListElement { description: "Tropical" },
             ListElement { description: "Seedless" }
         ]
     }
    }
}

This is an example of a nested model, but there are other possibilities. For example, if you're sourcing your data from a database, perhaps you just need to change the query used by the GridView's model, rather than setting a different model.


Depends on your models. Assuming CategoriesModel has category role, and ArticlesModel has setCategory method:

ListView {
    model: CategoriesModel {}
    delegate: Item {
        MouseArea {
            anchors.fill: parent
            onClicked: {
                grid_view.model.setCategory(model.category)
            }
        }
        // ...
    }
}

GridView {
    id: grid_view
    model: ArticlesModel {}
    // ...
}

Need Your Help

mysql UUID as String How to speed up my queries

php mysql uuid

I have my UUIDs as strings, I have thousands of items in my database. My queries that seem even basic seem to takes seconds and seconds to load - when I do more complex ones we're talking minutes of

Do you recommend procedural methodology software developement for small database application in dot net?

.net vb.net oop methodology

As a new entry to the software development industry I tried to develop my programming skill using different ways. One way I found out is as many suggests by reading code from other authors.