qt - How to add elements to a DelegateModelGroup depending on a property

Question

I have a ListModel and a DelegateModel, a ListView and 3 Buttons. The DelegateModel has one Group: myGroup With a click on of the first two buttons, I add elements to the ListModel with different properties, that then will be used to add them or not add them to myGroup. The third button is used to toggle the filter.

ListModel {
    id: rootModel
}


DelegateModel {
    id: visualModel
    model: rootModel
    groups: [DelegateModelGroup { name: 'myGroup' }]

    delegate: Rectangle {
        width: model.width
        height: model.height
        color: model.color
        border.width: 1

        Component.onCompleted: DelegateModel.inMyGroup = Qt.binding(function() {return width == 80})
    }
}

ListView {
    width: 300
    height: 480
    model: visualModel
}

Rectangle {
    id: b1
    x: 350
    width: 100
    height: 50
    color: 'lightsteelblue'
    Text {
        anchors.centerIn: parent
        text: 'add 80'
    }

    MouseArea {
        anchors.fill: parent
        onClicked: rootModel.append( { width: 80, height: 30, color: 'steelblue' })
    }
}

Rectangle {
    id: b2
    x: 350
    y: 70
    width: 100
    height: 50
    color: 'violet'
    Text {
        anchors.centerIn: parent
        text: 'add 50'
    }

    MouseArea {
        anchors.fill: parent
        onClicked: rootModel.append( { width: 50, height: 30, color: 'violet' })
    }
}
Rectangle {
    id: b3
    x: 350
    y: 140
    width: 100
    height: 50
    color: 'green'
    Text {
        anchors.centerIn: parent
        text: 'filter'
    }

    MouseArea {
        anchors.fill: parent
        property bool toggle: false
        onClicked: {
            visualModel.filterOnGroup = toggle ? '' : 'myGroup'
            toggle = !toggle
        }
    }
}

So far so good, as long as not filter is set, I can add elements of both types to the model, and then I can filter. However I can't add elements to the model (Group) as long as I have set the filter. This is obvious, as per default the element is not added, so the component is not completed, and nothing is added to the group, until I unset the filter again, and all pending elements are instanciated, completed, and finally added.

Therefore I look for another way to automatically add the elements depending on a property to the group, or to exclude them.

I know, I could set includeByDefault: true and then throw them out after they have been instanciated once. While this solves this particular issue, it does not solve the next, where I would change the property, therefore throw it out of the group, and then change it back. It won't reappear until the component is reinstanciated again.

Oh, and I know, I could solve this with C++, but I don't want to, unless necessary.

Answer 1

For those who are interested in it, with the hint of user2436719 I was able to hack together this model. It is a ListModel, and examplewise two DelegateModels, with groups to which the elements are added depending on a role of the listmodel.

ListModel{
    id: rootModel
    onCountChanged: setGroups(count - 1)
    onDataChanged: setGroups(arguments[0].row)
    property DelegateModel sub1:
        DelegateModel {
            id: subModel1
            model: rootModel
            groups: [
                DelegateModelGroup { name: 'myGroup' },
                DelegateModelGroup { name: 'notMyGroup' }
            ]
            delegate: Rectangle {
                width: model.width
                height: model.height
                color: model.color
                border.width: 1
            }
            filterOnGroup: (root.toggle ? 'myGroup' : 'notMyGroup')
        }
    property DelegateModel sub2:
        DelegateModel {
            id: subModel2
            model: rootModel
            groups: [
                DelegateModelGroup { name: 'myGroup' },
                DelegateModelGroup { name: 'notMyGroup' }
            ]
            delegate: Rectangle {
                radius: 5
                width: model.width
                height: model.height
                color: model.color
                border.width: 1

                Text {
                    anchors.centerIn: parent
                    text: DelegateModel.groups.toString()
                }
            }
            filterOnGroup: (root.toggle ? 'myGroup' : 'notMyGroup')
        }

    function setGroups(index) {
        console.log('set Groups for', index)
        var i = get(index)
        subModel1.items.setGroups(index, 1, ['items', (i.width === 80 ? 'myGroup' : 'notMyGroup')])
        subModel2.items.setGroups(index, 1, ['items', (i.width !== 80 ? 'myGroup' : 'notMyGroup')])
    }
}