Monday, January 12, 2009

Check whether all the checkboxes of a tree are unchecked from client side (Javascript)

We are using infragestics for our develpment. so we had to use the UltraWebTree provided by infragestics. Add this code in client side:

First, declare a global varriable:

var allUnchecked = true;

This part of the code should be written inside a javascript function where u will handle the event. For my work, I used the event handling of UltraWebMenu.


function ultraMenu1_itemClicked(MenuId, ItemId) {
if (ItemId == UltraWebMenuClientID + "_4") {
var treeInstance = igtree_getTreeById(UltraWebTreeClientID);
var testNodes = treeInstance.getNodes();
allUnchecked = true;
checkNodes(testNodes);
if (allUnchecked == true) {
alert('All are unchecked');
}
}
}

UltraWebTreeClienID holds the client id of infragestics ultrawebtree that was passed from the server side (a .cs code behind file where the ultrawebtree has been placed) in following way:


String Script = "var UltraWebTreeClientID = '" + UltraWebTree1.ClientID.Replace("_", "") + "';";
this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "InitVariable", Script, true);


UltraWebMenuClientID was passed from that .cs file in the same way, and _4 checks whether the 4th item of the ultrawebmenu is clicked.
checknodes is the function that checks all the nodes whether they are checked or not. Place it anywhere in the javascript file:

function checkNodes(testNodes){
for (var i = 0; i < testNodes.length; i++) {

if (testNodes[i].getChecked() == true) {
allUnchecked = false;
}
if (testNodes[i].hasChildren() == true) {
checkNodes(testNodes[i].getChildNodes())

}

}

}




After running checknodes recursively for all the nodes, it will go back to the main function and will show the alert if all nodes are unchecked.

No comments: