PDA

View Full Version : Checkbox cascade and bubble in treepanel.



gisada
8 Dec 2011, 2:08 AM
Checkbox cascade and bubble in treepanel.

I am trying to get a similar function into the checkbox tree in treepanel as is in pivot tables in Microsoft Excel by adding a listener.

1) If I check one node I want all the parents and child nodes to be checked.

2) If I uncheck all child nodes then I want the parent nodes to be unchecked.

The fallowing code works for the first situation but not for the second. Does anyone know how to do this?

Also is it possible to have a semi checked parent where some of the children but not all are checked like the fallowing example has?

http://static.geewax.org/checktree/index.html


listeners : {
checkchange: function(node, checked, options){
node.cascadeBy(function(n){n.set('checked', checked);} );
if(checked){
node.bubble(function(n){n.set('checked', checked);} );
}
}
}

tvanzoelen
8 Dec 2011, 3:15 AM
Did not test it but somehting in the way like below?




listeners:
{
checkchange: function(node, checked, options) {
if (checked) {
node.cascadeBy(function(n) { n.set('checked', checked); });
node.bubble(function(n) { n.set('checked', checked); });
}
else {
node.bubble(function(n) {

if(n != this)//check if the node is not the listener
{
var childNodes = this.childNodes;
var length = childNodes.length;
var allUnchecked = true;

for (var i = 0; i < length; i++) {
if (childNodes[i].get('checked')) {
allUnchecked = false;
break;
}
}

if (allUnchecked) {
n.set('checked', false);
}
}

});
}


}
}

gisada
8 Dec 2011, 5:07 AM
Almost exactly like this. I made some minor changes and it works fine. Thanks a lot for your help tvanzolen :D


listeners:{
checkchange: function(node, checked, options) {
node.cascadeBy(function(n) { n.set('checked', checked); });
if (checked) {
node.bubble(function(n) { n.set('checked', checked); });
}
else {
node.bubble(function(n) {
var childNodes = this.childNodes;
var length = childNodes.length;
var allUnchecked = true;

for (var i = 0; i < length; i++) {
if (childNodes[i].get('checked')) {
allUnchecked = false;
break;
}
}

if (allUnchecked) {
n.set('checked', false);
}
});
}
}
}