DelegateModel: Dynamic group generation, based on another model?

[viktoria.nemkin]

Hello!

I want to create a QML application where I have a bunch of Buttons that you can click on. These Buttons are categorized into groups.

At the top of the page there are CategoryButtons. When you click on one of the CategoryButtons all the Buttons in that category appear on the page. The Buttons not in that category remain hidden.

I have two models, one for the CategoryButtons and one for the Buttons.

Here are the models, just filled with random data:


ListModel {
id: categoryButtonsModel
ListElement {
name: "Super Awesome Category"
filterKey: "super"
}

ListElement {
name: "Slightly More Awesome Category"
filterKey: "slight"
}
}

ListModel {
id: buttonsModel
ListElement {
name: "Cool Button"
filterKey: "super"
}
ListElement {
name: "Geek Button"
filterKey: "super"
}
ListElement {
name: "Hipster Button"
filterKey: "slight"
}
}

I have added a property to all of these called filterKey. I want all Buttons to be in the category that has the same filterKey that they have. I use a DelegateModel to filter for filterKey:


DelegateModel {
id: buttonsDelegateModel
model: buttonsModel
delegate: Button {
text: name
}

filterOnGroup: "super"

groups: [
DelegateModelGroup {
includeByDefault: false
name: "super"
Component.onCompleted: {
for (var i = 0; i < buttonsModel.count; i++ ) {
var entry = buttonsModel.get(i);
if(entry.filterKey === name) insert(entry);
}
}
},

DelegateModelGroup {
includeByDefault: false
name: "slight"
Component.onCompleted: {
for (var i = 0; i < buttonsModel.count; i++ ) {
var entry = buttonsModel.get(i);
if(entry.filterKey === name) insert(entry);
}
}
}
]
}

This code above works. I have one problem only:

The groups property of the above DelegateModel is basically some generic code and the filterKeys in CategoryButtonsModel. I want to generate groups based on CategoryButtonsModel so I don't have to specify the same things two times.

How can I generate the groups list from CategoryButtonsModel dynamically?

Thank you for your time.

Regards,
Viki

[anda_skoa]

You could just show the full list and have each button's visible propert bound to a comparison of their filterKey with the main filter key.
So all buttons matching that would be visible, all others would not.

Cheers,
_

[viktoria.nemkin]

Hello!

Thank you for your answer. I have tried doing what you suggested. The problem is, even if the button is invisible it still occupies space. So the buttons that are visible have empty space between them where the invisible ones are.

I have tried setting the invisible buttons' width and height to zero. In case of a ListView, this solves the problem.

In my actual code I have a GridView and it does not work for a GridView. I guess the row and column number does not change for the delegates, even if some cells are invisible. I'm sorry, I thought this wasn't important in my example code.

[anda_skoa]

I guess in your actual code you have a real, C++ based, list model anyway, so either add a filter there or use a QSortFilterProxyModel on top of it.

Cheers,
_

[viktoria.nemkin]

Thank you, I think I will do that.