ListView inside another ListView

jech

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

portoist

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.

jech

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

jech

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?

portoist

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;
@

jech

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.