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"
    }
}

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"
    }
}

To copy to clipboard, switch view to plain text mode 

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);
                }
            }
        }
    ]
}

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);
                }
            }
        }
    ]
}

To copy to clipboard, switch view to plain text mode 

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.