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:

Qt Code: 
  1. ListModel {
  2.     id: categoryButtonsModel
  3.     ListElement {
  4.         name: "Super Awesome Category"
  5.         filterKey: "super"
  6.     }
  7.  
  8.     ListElement {
  9.         name: "Slightly More Awesome Category"
  10.         filterKey: "slight"
  11.     }
  12. }
  13.  
  14. ListModel {
  15.     id: buttonsModel
  16.     ListElement {
  17.         name: "Cool Button"
  18.         filterKey: "super"
  19.     }
  20.     ListElement {
  21.         name: "Geek Button"
  22.         filterKey: "super"
  23.     }
  24.     ListElement {
  25.         name: "Hipster Button"
  26.         filterKey: "slight"
  27.     }
  28. }
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:

Qt Code: 
  1. DelegateModel {
  2.     id: buttonsDelegateModel
  3.     model: buttonsModel
  4.     delegate:  Button {
  5.         text: name
  6.     }
  7.  
  8.     filterOnGroup: "super"
  9.  
  10.     groups: [
  11.         DelegateModelGroup {
  12.             includeByDefault: false
  13.             name: "super"
  14.             Component.onCompleted: {
  15.                 for (var i = 0; i < buttonsModel.count; i++ ) {
  16.                     var entry = buttonsModel.get(i);
  17.                     if(entry.filterKey === name) insert(entry);
  18.                 }
  19.             }
  20.         },
  21.  
  22.         DelegateModelGroup {
  23.             includeByDefault: false
  24.             name: "slight"
  25.             Component.onCompleted: {
  26.                 for (var i = 0; i < buttonsModel.count; i++ ) {
  27.                     var entry = buttonsModel.get(i);
  28.                     if(entry.filterKey === name) insert(entry);
  29.                 }
  30.             }
  31.         }
  32.     ]
  33. }
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