Selection of Child Checkbox using Header Checkbox and viceversa

[beemaneni]

Hi Guyz
I am struck with this simple logic in assigning selected child checkbox values to header checkbox values.This requiremnet is as simple as we see in our daily life i.e., When i select/unselect Header Checkbox all child checkboxes has to be selected/unselected. I could do the above requiremnet. Going further ,when i deselect any of the child checkbox ,header checkbox has to be deselected.I could not achieve the same.Can you guys help me in achieving this as i am struggling for few days. Here i add my source code which i am able to select/deselect child checkbox wen i change header checkbox accordingly.

Rectangle{
        id: header
        width: 620
        height: 70
        y: 150
        color: "#E8E8E8"
        anchors{left: parent.left;leftMargin: 110;top:separator.bottom}
 
        CheckBox {
            id: headerCombo
            text: qsTr("Select All")
            checked: false
            anchors{left: parent.left;leftMargin: 38;top:parent.top;topMargin: 20}
 
            onCheckedChanged: {
                for(var i=0;i<checkBoxModel.count;i++)
                {
                    checkBoxModel.set(i,{"selected": headerCombo.checked})
                }
            }
        }
    }
 
    ListModel {
        id: checkBoxModel
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
    }
 
 
    ListView{
        id: listt
        model: checkBoxModel
        clip:true
        width: 620
        anchors{left: parent.left;leftMargin: 110;top: header.bottom;topMargin: 10;bottom: bottomBar.top}
        delegate: listDelegate
    }
 
    Component {
        id: listDelegate
        Item {
            id: name
            width: 620
            height: 70
 
            CheckBox {
                id: childCombo
                text: qsTr("Select All")
                checked: selected
                anchors{left: parent.left;leftMargin: 38;top:parent.top;topMargin: 20}
            }
        }
    }

Rectangle{
        id: header
        width: 620
        height: 70
        y: 150
        color: "#E8E8E8"
        anchors{left: parent.left;leftMargin: 110;top:separator.bottom}

        CheckBox {
            id: headerCombo
            text: qsTr("Select All")
            checked: false
            anchors{left: parent.left;leftMargin: 38;top:parent.top;topMargin: 20}

            onCheckedChanged: {
                for(var i=0;i<checkBoxModel.count;i++)
                {
                    checkBoxModel.set(i,{"selected": headerCombo.checked})
                }
            }
        }
    }

    ListModel {
        id: checkBoxModel
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
    }


    ListView{
        id: listt
        model: checkBoxModel
        clip:true
        width: 620
        anchors{left: parent.left;leftMargin: 110;top: header.bottom;topMargin: 10;bottom: bottomBar.top}
        delegate: listDelegate
    }

    Component {
        id: listDelegate
        Item {
            id: name
            width: 620
            height: 70

            CheckBox {
                id: childCombo
                text: qsTr("Select All")
                checked: selected
                anchors{left: parent.left;leftMargin: 38;top:parent.top;topMargin: 20}
            }
        }
    }

To copy to clipboard, switch view to plain text mode 

Regards
Bala Beemaneni

[anda_skoa]

So checking/unchecking all items when clicking the header checkbox works?

What did you do next? Add an onCheckedChanged handler to the delegate's checkbox?
If so it seems to be missing in your code snippet.

Cheers,
_

[beemaneni]

Hi
I have done that...
onCheckedChanged() //on delegate checkbix
{
//here i am changing the header checkbox state. The moment i change header checkbox again its oncheckedChanged is emitted.so all the properties of list is set accordingly
}


Regards
Bala B

---

Added after 7 minutes:

Hi
Here i post my entire new code which i could get the requirement done with some issues (not sure is it binding issue)

Here in this code i was able to select/unselect using header and when any child element gets changed header gets deselected.When all the child elements are selected header gets selected.But the issue here is once child elements gets changed its state ,header is not able to set the state back,but when you click on header it successfully updates the child elements list model.I verified the values.But the checkbox front end is not getting selected/unselected..

Rectangle{
        id: header
        width: 620
        height: 70
        y: 150
        color: "#E8E8E8"
        anchors{left: parent.left;leftMargin: 110;top:separator.bottom}
 
        CheckBox {
            id: headerCombo
            text: qsTr("Select All")
            checked: false
            anchors{left: parent.left;leftMargin: 38;top:parent.top;topMargin: 20}
            onCheckedChanged: {
 
                if(headerCombo.pressed)
                {
                    console.log("checjed chaneging")
                    for(var i=0;i<checkBoxModel.count;i++)
                    {
                        checkBoxModel.set(i,{"selected": headerCombo.checked})
                    }
                }
            }
        }
    }
    ListModel {
        id: checkBoxModel
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
    }
 
 
    ListView{
        id: listt
        model: checkBoxModel
        clip:true
        width: 620
        anchors{left: parent.left;leftMargin: 110;top: header.bottom;topMargin: 10;bottom: bottomBar.top}
        delegate: listDelegate
    }
 
    Component {
        id: listDelegate
 
        Warnings{            //consider this  item as checkbox
            id: warningsList
            width: 620
            color: "#EFF0F0"
            childChkBox: selected           //this is checked property
            onChildChanged: {
 
                if(!headerCombo.pressed && childChkBox===true){
                    console.log(" changed by child true")
                    checkBoxModel.set(index,{"selected": true})
                    checkSelection()
                }
                else if(!headerCombo.pressed && childChkBox===false){
                    console.log(" changed by child false")
                    checkBoxModel.set(index,{"selected": false})
                    checkSelection()
                }
                else
                {
                    console.log(" changed by Parent")
                    for(var i=0;i<checkBoxModel.count;i++)
                    {
                        checkBoxModel.set(index,{"selected": headerCombo.checked})
                    }
                }
 
//             function checkSelection1()
//             {
 
//               for(var i=0;i<checkBoxModel.count;i++)
//               {
//                  if(checkBoxModel.get(i).selected===true){
//                      headerValue=true
//                   }
//                  else
//                      headerValue=false
 
//               }
 
 
//             }
 
 
 
               function checkSelection()
                {
                    if(checkBoxModel.get(0).selected===true)
                    {
                        if(checkBoxModel.get(1).selected===true)
                        {
                            if(checkBoxModel.get(2).selected===true)
                            {
                                if(checkBoxModel.get(3).selected===true)
                                {
                                    if(checkBoxModel.get(4).selected===true)
                                    {
                                        if(checkBoxModel.get(5).selected===true)
                                        {
                                            headerValue=true
                                        }
                                        else
                                        {
                                            headerValue=false
                                        }
                                    }
                                    else
                                    {
                                        headerValue=false
                                    }
                                }
                                else
                                {
                                    headerValue=false
                                }
                            }
                            else
                            {
                                headerValue=false
                            }
                        }
                        else
                        {
                            headerValue=false
                        }
                    }
                    else
                    {
                        headerValue=false
                    }
                }
            }
        }
    }

Rectangle{
        id: header
        width: 620
        height: 70
        y: 150
        color: "#E8E8E8"
        anchors{left: parent.left;leftMargin: 110;top:separator.bottom}

        CheckBox {
            id: headerCombo
            text: qsTr("Select All")
            checked: false
            anchors{left: parent.left;leftMargin: 38;top:parent.top;topMargin: 20}
            onCheckedChanged: {

                if(headerCombo.pressed)
                {
                    console.log("checjed chaneging")
                    for(var i=0;i<checkBoxModel.count;i++)
                    {
                        checkBoxModel.set(i,{"selected": headerCombo.checked})
                    }
                }
            }
        }
    }
    ListModel {
        id: checkBoxModel
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
        ListElement { selected: false; }
    }


    ListView{
        id: listt
        model: checkBoxModel
        clip:true
        width: 620
        anchors{left: parent.left;leftMargin: 110;top: header.bottom;topMargin: 10;bottom: bottomBar.top}
        delegate: listDelegate
    }

    Component {
        id: listDelegate

        Warnings{            //consider this  item as checkbox
            id: warningsList
            width: 620
            color: "#EFF0F0"
            childChkBox: selected           //this is checked property
            onChildChanged: {

                if(!headerCombo.pressed && childChkBox===true){
                    console.log(" changed by child true")
                    checkBoxModel.set(index,{"selected": true})
                    checkSelection()
                }
                else if(!headerCombo.pressed && childChkBox===false){
                    console.log(" changed by child false")
                    checkBoxModel.set(index,{"selected": false})
                    checkSelection()
                }
                else
                {
                    console.log(" changed by Parent")
                    for(var i=0;i<checkBoxModel.count;i++)
                    {
                        checkBoxModel.set(index,{"selected": headerCombo.checked})
                    }
                }

//             function checkSelection1()
//             {

//               for(var i=0;i<checkBoxModel.count;i++)
//               {
//                  if(checkBoxModel.get(i).selected===true){
//                      headerValue=true
//                   }
//                  else
//                      headerValue=false

//               }


//             }



               function checkSelection()
                {
                    if(checkBoxModel.get(0).selected===true)
                    {
                        if(checkBoxModel.get(1).selected===true)
                        {
                            if(checkBoxModel.get(2).selected===true)
                            {
                                if(checkBoxModel.get(3).selected===true)
                                {
                                    if(checkBoxModel.get(4).selected===true)
                                    {
                                        if(checkBoxModel.get(5).selected===true)
                                        {
                                            headerValue=true
                                        }
                                        else
                                        {
                                            headerValue=false
                                        }
                                    }
                                    else
                                    {
                                        headerValue=false
                                    }
                                }
                                else
                                {
                                    headerValue=false
                                }
                            }
                            else
                            {
                                headerValue=false
                            }
                        }
                        else
                        {
                            headerValue=false
                        }
                    }
                    else
                    {
                        headerValue=false
                    }
                }
            }
        }
    }

To copy to clipboard, switch view to plain text mode 

Thanks in Advance


Regards
Bala B

[anda_skoa]

While this is a lot more complicated than necessary, your problem with the "unresponsive" child is that a binding is overwritten.

Basically your initial delegate state is this

CheckBox {
    checked: model.selected
}

CheckBox {
    checked: model.selected
}

To copy to clipboard, switch view to plain text mode 

which makes the CheckBox follow the model.
Then you click the checkbox, you end up with

CheckBox {
    checked: true // or false depending on the previous value
}

CheckBox {
    checked: true // or false depending on the previous value
}

To copy to clipboard, switch view to plain text mode 

So there is no binding to the model anymore.

You need to restore the binding after the component has changed its value by itself

CheckBox {
    checked: model.selected
    onCheckedChanged: {
        // not sure of ListModel allows to modify items directly, this seems to already work in your code
        checkBoxModel.set(model.index, { "selected": checked });
 
        // restore binding
        checked = Qt.binding(function() { return model.selected; });
    }
}

CheckBox {
    checked: model.selected
    onCheckedChanged: {
        // not sure of ListModel allows to modify items directly, this seems to already work in your code
        checkBoxModel.set(model.index, { "selected": checked });

        // restore binding
        checked = Qt.binding(function() { return model.selected; });
    }
}

To copy to clipboard, switch view to plain text mode 

Cheers,
_

[beemaneni]

I was not so clear ..Let me ask my doubts..
Why do i need to restore the values as i am able to successfully see it in list model i.e., i am updating listmodel on every delegate item changed.The values are getting updated in listmodel properly.At any point of time i am able to see which is selected/deselected in my list model which is quite good.
I am not exactly clear what is happening during that binding.If you dont mind , can u elaborate


Thanks & regards
Bala B

[anda_skoa]

Why do i need to restore the values as i am able to successfully see it in list model

You don't need to restore any values, you need to restore property bindings after they got overwritten.

I am not exactly clear what is happening during that binding.If you dont mind , can u elaborate

You start with a property binding for the checked property, so it gets updated whenever the model's data changes.
You then click in the checkbox, so the value is now fixed, no longer a binding.
If you want the checkbox to update itself based on the model data again, you need to restore the binding.

Cheers,
_

[beemaneni]

Thanks Dude
That works fine.