Asp.Net 2.0 Treeview Checkbox Check/Uncheck All script

Its a very common requirement to have the parent-child check behaviour in asp.net treeview. To define the problem:
1)Check all the child nodes if the parent is checked and uncheck all child nodes if parent is unchecked ( well, this part is simple).
2)If a node at any level is checked and all its siblings are already checked then the parent node should be checked and the same should apply for the parent node(i.e., if its siblings are checked….), this should happen till the root node.
3)If a node at any level is unchecked then the parents( ma, grand ma, grand grand ma….) up to the root node must be unchecked.

Well there have been scripts on the net that only half accomplished the task(check footnotes). So I wrote the script that solves the problem completely, upto best of my knowledge. I’ve tested in IE 7 and Firefox 2.0, hope it works fine for you all.

Here’s how to implement it:

Step 1: In the page load in code behind file add an attribute to the treeview as:

 

Code
If(!isPostBack)
{
TreeView1.Attributes.Add(”onclick”,”OnTreeClick(
event)”);
}

 

The desired affect could also be accomplished by direclty adding the attribute to the treeview tag in .aspx file as: <asp:treeview onclick=”OnTreeClick(event)”… which would cause Visual Studio to display a warning but it works anyway but the codebehind way of doint it is the right way.

Step 2: Put the below script in the head section of your .aspx page:

 

Code

 

//utility function to get the container of an element by tagname
function GetParentByTagName(parentTagName, childElementObj)
{
var parent = childElementObj.parentNode;
while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
{
parent = parent.parentNode;
}
return parent;
}

The script is pretty much self explanatory with function names saying it all.
Comments awaited.

Now, see the whole code,

 

Code
posted @ 2009-01-23 20:36  海洋——海纳百川,有容乃大.  阅读(383)  评论(0编辑  收藏  举报