Home > ASP.Net, Javascript > Collapse and expand Node of Treeview

Collapse and expand Node of Treeview


try this example:

<%@ Page Language="C#" Theme="Default" %>

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head id="Head1" runat="server">
    <title>TreeView Demo</title>

    <script language="javascript" type="text/javascript">
        function TreeviewExpandCollapseAll(treeViewId, expandAll)
          var displayState = (expandAll == true ? "none" : "block");
          var treeView = document.getElementById(treeViewId);
              var treeLinks = treeView.getElementsByTagName("a");
              var nodeCount = treeLinks.length;
                       if(treeLinks[i].firstChild.tagName.toLowerCase() =="img")
                           var currentToggleLink = treeLinks[i];
                           var childContainer = GetParentByTagName("table", currentToggleLink).nextSibling;
                           if (childContainer.style.display == displayState)
        function GetParentByTagName(parentTagName, childElementObj)
        var parent = childElementObj.parentNode;
        while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
          parent = parent.parentNode;
        return parent;
    <form id="form1" runat="server">
        <asp:TreeView ID="TreeViewDemo" runat="server" ExpandDepth="0">
                <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A" Value="A">
                    <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A1" Value="A1">
                        <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A11" Value="A11"></asp:TreeNode>
                        <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A12" Value="A12"></asp:TreeNode>
                    <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A2" Value="A2">
                        <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A21" Value="A21"></asp:TreeNode>
                        <asp:TreeNode NavigateUrl="http://www.asp.net" Text="A22" Value="A22"></asp:TreeNode>
        <a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', true)">Expand
            All</a> <a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', false)">
                Collapse All</a>

Good Luck

Categories: ASP.Net, Javascript Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: