ASP.NET Treeview checkbox with select all

How to create asp.net treeview with check box select all functionality using javascript
It is very easy to create a checkbox with the ASP.NET treeview by the property
ShowCheckBoxes="All".Suppose yoy have a two or three level nodes in the tree hierarchy.You want to select the parent node & you like to select all the child node chekbox to be selected automatically.De selecting any of the child node,the parent node will be deslected but the remaining other child nodes will be remain same.Following are the solution of this problem.
Step 1.
Create a javascript file & save it as a TreeViewCheckUncheck.js.
// JScript File

function OnTreeClick(evt)
{
//alert(evt);
var src = window.event != window.undefined ? window.event.srcElement : evt.target;
var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
if(isChkBoxClick)
{
//alert(src.value);
var parentTable = GetParentByTagName("table", src);
var nxtSibling = parentTable.nextSibling;
//check if nxt sibling is not null & is an element node
if(nxtSibling && nxtSibling.nodeType == 1)
{
if(nxtSibling.tagName.toLowerCase() == "div")
//if node has children
{
//check or uncheck children at all levels
CheckUncheckChildren(parentTable.nextSibling, src.checked);
}
}
//check or uncheck parents at all levels
CheckUncheckParents(src, src.checked);
}
}
function CheckUncheckChildren(childContainer, check)
{
var childChkBoxes = childContainer.getElementsByTagName("input");
var childChkBoxCount = childChkBoxes.length;
for(var i=0;i<childChkBoxCount;i++)
{
childChkBoxes[i].checked = check;
}
}

function CheckUncheckParents(srcChild, check)
{
var parentDiv = GetParentByTagName("div", srcChild);
var parentNodeTable = parentDiv.previousSibling;
if(parentNodeTable)
{
var checkUncheckSwitch;
if(check) //checkbox checked
{
var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
if(isAllSiblingsChecked)
checkUncheckSwitch = true;
else
return; //do not need to check parent if any(one or more) child not checked
}
else //checkbox unchecked
{
checkUncheckSwitch = false;
}
var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
if(inpElemsInParentTable.length > 0)
{
var parentNodeChkBox = inpElemsInParentTable[0];
parentNodeChkBox.checked = checkUncheckSwitch; //do the same recursively
CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}

function AreAllSiblingsChecked(chkBox)
{
var parentDiv = GetParentByTagName("div", chkBox);
var childCount = parentDiv.childNodes.length;
for(var i=0;i<childCount;i++)
{
if(parentDiv.childNodes[i].nodeType == 1)
{
//check if the child node is an element node
if(parentDiv.childNodes[i].tagName.toLowerCase() == "table")
{
var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
//if any of sibling nodes are not checked,
return false
if(!prevChkBox.checked)
{
return false;
}
}
}
}
return true;
}
//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;
}


Step 2.Call this javascript file from the particular location

<script src="../Javascript/TreeViewCheckUncheck.js" language="javascript" type="text/javascript"></script>

Step 3. Create a ASP.NET treeview and bind it to your datasource .call the javascript function from onClick event of the treeview as follows.
<asp:TreeView ID="TreeView1" NodeStyle-CssClass="treeview" runat="server" ShowCheckBoxes="All"
DataSourceID="XmlDataSource1" onClick="javascript:OnTreeClick(event);">
<HoverNodeStyle CssClass="treeview" />
<NodeStyle CssClass="treeview" />
<DataBindings>
<asp:TreeNodeBinding SelectAction="None" PopulateOnDemand="true" Value="ID" ValueField="ID"
TextField="Name"></asp:TreeNodeBinding>
</DataBindings>
</asp:TreeView>

Output: