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 Li

Answer 1

The problem is that DelegateModel.inMyGroup = Qt.binding(function() {return width == 80}) is evaluated only once the object is displayed. But when filter is on, if an element is added it does not belongs to myGroup group, so it is not displayed and never has a chance to evaluate the condition.

Here is a quick fix, I added a function that executes every time an element is added. The default group seems to be 'items' and not ''.

Window {
    visible: true
    width: 640
    height: 480
    property bool toggle: true


    ListModel{
        id: rootModel
        onCountChanged: visualModel.setGroups()
    }

    DelegateModel {
        id: visualModel
        model: rootModel
        filterOnGroup: toggle ? 'items' : 'myGroup'
        groups: [DelegateModelGroup { id: myGroup; name: 'myGroup' }]

        function setGroups() {
            var newItem = rootModel.get(rootModel.count - 1)
            var groups;
            if (newItem.width == 80){
                groups = ['items', 'myGroup'];
            }else{
                groups = ['items'];
            }
            items.setGroups(rootModel.count - 1, 1, groups)
        }

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

    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
            onClicked: {
                toggle = !toggle
            }
        }
    }
}