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

Collapse and expand Node of Treeview


Hi

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);
          if(treeView)
          {
              var treeLinks = treeView.getElementsByTagName("a");
              var nodeCount = treeLinks.length;
                  
              for(i=0;i<nodeCount;i++)
              {
                   if(treeLinks[i].firstChild.tagName)
                   {
                       if(treeLinks[i].firstChild.tagName.toLowerCase() =="img")
                       {
                           var currentToggleLink = treeLinks[i];
                           var childContainer = GetParentByTagName("table", currentToggleLink).nextSibling;
                           if (childContainer.style.display == displayState)
                            {
                               eval(currentToggleLink.href);
                            }
                      }
                   }
              }
          }
        }
        function GetParentByTagName(parentTagName, childElementObj)
        {
        var parent = childElementObj.parentNode;
        while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
        {
          parent = parent.parentNode;
        }
        return parent;
        }
    head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TreeView ID="TreeViewDemo" runat="server" ExpandDepth="0">
            <Nodes>
                <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>
                    <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>
                    </asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>
        <a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', true)">Expand
            All</a> <a href="javascript:TreeviewExpandCollapseAll('<%=TreeViewDemo.ClientID%>', false)">
                Collapse All</a>
    </div>
    </form>
</body>
</html>

Good Luck

Advertisements
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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: