Important: Please read the Qt Code of Conduct -

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: [
    And then display it like this:
    orientation: ListView.Vertical
    model: rowModel
    delegate: ListView{
    orientation: ListView.Horizontal
    model: modelData.colModel
    delegate: Text{text:}
    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: [

    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
    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": for more.
    But as workaround you can do:
    var tmp = rowModel;
    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