The right way to create a multi column ListView

jech

Hello,

With my question I'd continue with my UI mentioned "here.":http://developer.qt.nokia.com/forums/viewthread/1832/

Basically it's a layout with 4 columns, but only 2 of them are visible. I implemented it as nested ListViews. The first one is horizontal and it contains the vertical lists as it's components.

Now I'm trying to connect the UI with my Python (PySide) backend. I followed "this example.":http://developer.qt.nokia.com/wiki/Selectable_list_of_Python_objects_in_QML I managed to create the vertical lists with identical data. But of course I need to have different data in each column. So my first idea was to assign a different model to each horizontal list delegate (=column). But it didn't work.

So my second idea is to create a 2-dimension list, which will contain the data for all 4 columns. But I don't know how to implement it. Also when an item is clicked, I need to know which one in which column it is.

Which of these 2 ideas is better: different models or 2D list? How to implement it? Please note hat I will need to update the columns dynamically (from the backend) and if possible independently.

baysmith

Here is one way I found to create columns in a ListView:

"How to create columns in a QML ListView":http://developer.qt.nokia.com/wiki/How_to_create_columns_in_a_QML_ListView

mbroadst

Jech,
Have you considered implementing this using a multi-column QTableView? You can embed all the logic you describe here within the model you assign to the view.

mbroadst

Oh, excuse me I failed to notice this was a question about Quick...

jech

Bradley,

Thanks for the suggestion. Unfortunately this doesn't solve my problem. The 4 columns must be independent. Each of them will have different data and different number of items.

baysmith

Ok. Independent columns, I understand better now. I thought maybe you were scrolling the columns in sync.

[quote author="jech" date="1292093043"]Now I'm trying to connect the UI with my Python (PySide) backend. I followed "this example.":http://developer.qt.nokia.com/wiki/Selectable_list_of_Python_objects_in_QML I managed to create the vertical lists with identical data. But of course I need to have different data in each column. So my first idea was to assign a different model to each horizontal list delegate (=column). But it didn't work.[/quote]

Why didn't this work? Seems to me that it would work.

[quote author="jech" date="1292093043"]So my second idea is to create a 2-dimension list, which will contain the data for all 4 columns. But I don't know how to implement it. Also when an item is clicked, I need to know which one in which column it is.[/quote]

For the 2-dimensional list, won't an indexAt(mouseX, mouseY) function work?

[quote author="jech" date="1292093043"]Which of these 2 ideas is better: different models or 2D list? How to implement it? Please note hat I will need to update the columns dynamically (from the backend) and if possible independently.[/quote]

Seems to me, that the first idea is better since you want to have the columns independent.

jech

Bradey,

Thanks a lot for your reply. I tried to do this for the horizontal ListView:

@ListModel {
id: horizontalList
ListElement { name: "Column 1"; model: model1 }
ListElement { name: "Column 2"; model: model2 }
ListElement { name: "Column 3"; model: model3 }
ListElement { name: "Column 4"; model: model4 }
}
@

But this gave me an error. So I implemented it differently. I defined the list model this way.

@ListModel {
id: horizontalList
ListElement { name: "Column 1"; index: 1 }
ListElement { name: "Column 2"; index: 2 }
ListElement { name: "Column 3"; index: 3 }
ListElement { name: "Column 4"; index: 4 }
}
@

And then in the vertical list I defined an array of models:

@property variant models: [model1, model2, model3, model4]

ListView {
id: listView
anchors.fill: parent
model: models[index]
delegate: itemDelegate
highlight: highlightBar
}
@

This seems to work so far.