JBossDeveloper

Had same opinion regarding this issue, but in case of checkboxes (and actually their value binding) it will not work.

setSelected method is invoked not immediately when you click the checkbox, it will be invoked when page data is submitted (as far as I understand).

The simplest approach will not work, I was thinking of using javascript but I'm not good in it at all.

Hey viggo

I decided to dig into JavaScripts and use jQuery js library to update child and parent checkboxes depending on state of current checkbox.

Here is the js code of updating child checkboxes using jQuery

// Put event for the document and perform operations when document is ready
// Similar to window.onload = function(){ ... }
jQuery(document).ready(function() {

 // Add click event listener to each checkbox in the tree page
 // Note! Using this simple selector assumes that there are no other
 // checkboxes on the page, if there are other checkboxes then
 // selector should be changed
 jQuery(":checkbox").click(function(){
 updateChildren(this);
 });
});


// Update checkboxes that are placed in child nodes of tree regarding to current checkbox
function updateChildren(currentCheckbox) {
 // Get state of current checkbox (true or false)
 var state = currentCheckbox.checked;

 // Get parent TABLE, where current checkbox is places
 var parentTables = jQuery(currentCheckbox).parents("table");
 var parentTable = parentTables[0];

 // Get DIV where child nodes with checkboxes are situated
 // See http://docs.jquery.com/Traversing/ to get better uderstanding of
 // parents() and next()
 var childDivs = jQuery(parentTable).next("div");
 var childDiv = childDivs[0];

 // Iterate over all child nodes checkboxes and set same state as the
 // current checkbox state
 jQuery(childDiv).contents().find(":checkbox").each(function() {
 this.checked = state;
 });
}

Hi nayanj

Thank You for support and help.

Actually this my second try to implement tree with multiple selection.

The first try was based on a4j:support, so after each click of tree node the AJAX request was sent to server. This solution worked great until I had large tree (>80 nodes), and as I had to reRender the whole tree after each AJAX response it took up to 4sec. for selection to finish.

Try making your tree large also and see if You have performance issues.

My second try is based on client side processing of tree via JavaScript. I'm not a JavaScript guru, but using jQuery js library made this task very simple. Right now I've finished parent nodes update functionality. See code below:

function updateParent(currentCheckbox) {
 var parentDivs = jQuery(currentCheckbox).parents("div");

 parentDivs.each(function() {
 var parentDiv = this;

 var hasSelected = false;
 var hasUnselected = false;

 jQuery(parentDiv).contents().find(checkboxSelector).each(function() {
 if(this.checked) {
 hasSelected = true;
 }
 });

 var parentTables = jQuery(parentDiv).prev("table");
 var parentTable = parentTables[0];

 var parentCheckboxes = jQuery(parentTable).find(":checkbox");
 var parentCheckbox = parentCheckboxes[0];

 parentCheckbox.checked = hasSelected;
 });
}

Hi nayanj,

Thank you for help and support. I'll review article that you have provided.

Please try your solution with large tree, it's very interesting to me, maybe your AJAX request/response are smaller then mine and your tree will be faster.

Waiting forward any news