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 ShowCheckBox="True" Text="Indore " Value="Indore
</asp:TreeNode>
<asp:TreeNode Text="U.P" Value="U.P">
<asp:TreeNode ShowCheckBox="True" Text="Kanpur " Value="Kanpur
<asp:TreeNode ShowCheckBox="True" Text="Patna " Value="Patna
</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>
