ListView inside another ListView



  • Hi,

    I'm trying to find the right way to solve following problem:

    I have a vertical ListView which contains horizontal ListViews in it's Delegates. Imagine it as a table, which you can scroll horizontally and also scroll each column vertically.

    Now what would be the best way to fill such UI with data? I used to have a model implemented in Python and it works well. But I want to port it away from Python and use only QML.

    Imagine I have a list of 1000 text items and I want to fill the 2nd column with them. How could I do it? Is it possible to directly access for example the 2nd delegate of my horizontal ListView and call a function inside it, which would append the items?

    I hope it's clear what I want to do. If not, please let me know and I'll provide an example....



  • I would create a data model to be like this:
    @
    property var rowModel: [
    {colModel:[{name:"item11"},{name:"item12"}]},
    {colModel:[{name:"item21"},{name:"item22"}]}
    ]
    @
    And then display it like this:
    @
    ListView{
    orientation: ListView.Vertical
    model: rowModel
    delegate: ListView{
    orientation: ListView.Horizontal
    model: modelData.colModel
    delegate: Text{text: modelData.name}
    }
    }
    @
    Unfortunately there is no method for getting ListView item by its order. However you can use currentIndex and currentItem properties as workaround.



  • Thank you, good idea, it works just like I needed!



  • One more question regarding this. Let's say I have a quite huge set of data which is a 2 dimensional list. The modified example from above would contain something like this:

    @ property var rowModel: [
    {colModel:[{name:"item11";address:"address11"},{name:"item12";address:"address12"}]},
    {colModel:[{name:"item21";address:"address21"},{name:"item22";address:"address21"}]}
    ]
    @

    The list I have looks like this:

    @[["item11","address11"],["item12",address12"],["item12",address13"], ... ]@

    Now I want to set this data as the content of one of the colModel. What would be the best way to do it?



  • You can work with this same as with JSON object/array.
    Lets assume the rowModel from your post
    @
    rowModel[1].colModel[1]={"name":"changedItem22","address":"changedAddress22"};
    @
    Will produce:
    @
    [
    {colModel:[{name:"item11";address:"address11"}, {name:"item12";address:"address12"}]},
    {colModel:[{name:"item21";address:"address21"}, {name:"changedItem22";address:"changedAddress22"}]}
    ]
    @
    Values in square brackets can be accessed by index, and values in curly brackets by its key name.
    However changing your object like this won't update it's binding see "doc":http://qt-project.org/doc/qt-5.0/qtqml/qml-var.html for more.
    But as workaround you can do:
    @
    var tmp = rowModel;
    tmp[1].colModel[1].name="changedItem22";
    rowModel = tmp;
    @



  • Thanks a lot once again. It works perfectly now. I knew I cannot directly change the values because the view won't be updated. I tried to completely replace the "rowModel" with a 2-dimensional array which didn't work. But your code works very nicely and it is acceptable fast even for thousands of rows, which I was worrying about.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.