How to Select-Unselect and Check-Uncheck TreeView nodes and controls using javascript

How to Select-Unselect and Check-Uncheck TreeView nodes and controls using javascript

In ASP.NET if you have treeview control with check box or other controls and your requirement to select-unselect and check-uncheck all treeview nodes and controls, then I have sample javascript function to achive this.This code is compatable with all browsers (IE,Mozilla,Netscape etc.)

Scree Shot

Source code Design (How to use)

<form id="form1" runat="server">

<div>

<a id="lnkExpandAll" href="javascript:ExpandCollapseAll('tvTest',true)">Expand all</a>

<a id="lnkCollapseAll" href="javascript:ExpandCollapseAll('tvTest',false)">Collapse all</a>

<a id="lnkCheckaAll" href="javascript:CheckUnCheckAll('tvTest',true)">Check all</a><a id="lnkUncheckAll" href="javascript:CheckUnCheckAll('tvTest',false)">UnCheck all</a>

</div>

<asp:TreeView ID="tvTest" runat="server">

<Nodes>

<asp:TreeNode Text="State" Value="State">

<asp:TreeNode Text="M.H" Value="M.H">

<asp:TreeNode ShowCheckBox="True" Text="Pune" Value="Pune"></asp:TreeNode>

<asp:TreeNode ShowCheckBox="True" Text="Mumbai" Value="Mumbai"></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Text="M.P" Value="M.P">

<asp:TreeNode ShowCheckBox="True" Text="Jabalpur" Value="Jabalpur"></asp:TreeNode>

<asp:TreeNode ShowCheckBox="True" Text="Indore" Value="Indore"></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Text="U.P" Value="U.P">

<asp:TreeNode ShowCheckBox="True" Text="Kanpur" Value="Kanpur"></asp:TreeNode>

<asp:TreeNode ShowCheckBox="True" Text="Patna" Value="Patna"></asp:TreeNode>

</asp:TreeNode>

</asp:TreeNode>

</Nodes>

</asp:TreeView>

</form>

JavaScript Code

<script language="javascript" type="text/javascript">

//This function will check and uncheck all check box depends upon mode true/false;

function CheckUnCheckAll(treeViewId,mode)

{

var treeView = document.getElementById(treeViewId);

var treeLinks = treeView.getElementsByTagName("input");

for (var iCounter=0; iCounter< treeLinks.length; iCounter++)

{

if (treeLinks[iCounter].type=="checkbox" && mode)

{

treeLinks[iCounter].checked=true;

}

if (treeLinks[iCounter].type=="checkbox" && !mode)

{

treeLinks[iCounter].checked=false;

}

}

}

//This function will expend/collapse tree node depends upon mode true/false;

function ExpandCollapseAll(treeViewId,mode)

{

var treeView = document.getElementById(treeViewId);

var treeLinks = treeView.getElementsByTagName("a");

var flag = true; var node; var level; var childContainer;

if (mode == true)

mode= 'none';

else

mode ='block';

for(var iCounter=0;iCounter<treeLinks.length;iCounter++)

{

if(treeLinks[iCounter].firstChild.tagName == "IMG")

{

node = treeLinks[iCounter];

level = parseInt(treeLinks[iCounter].id.substr(treeLinks[iCounter].id.length - 1),10);

childContainer = document.getElementById(treeLinks[iCounter].id + "Nodes");

if(flag)

{

if(childContainer.style.display == mode)

{

TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'',childContainer);

//CheckUnCheckAll(treeViewId,mode);

}

flag = false;

}

else

{

if(childContainer.style.display == mode)

{

TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'',childContainer);

//CheckUnCheckAll(treeViewId,mode);

}

}

}

}

}

</script>