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



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


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
}

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
}

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


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.