Client Side Expand/Collapse All Nodes For ASP.NET 2.0 Treeview

The asp.net treeview provides a lot of features/functions, one of which is the Expand/Collapse All functionality on the server side. The Treeview Control has got two function for doing just that: TreeView.ExpandAll(), TreeView.CollapseAll(). But going to server to accomplish such a simple functionality seemed a little odd to me. So, I wrote some javascript that does precisely the same. Checkout the below script:

Oops!! The current security settings of your browser do not allow the scripts on the page to access your clipboard.If you are using mozilla firefox, you may change security settings as follows: Type about:config in the url bar and set signed.applets.codebase_principal_support to true. For more info, check here or contact blog author.

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);
                        }
                  }
               }
          }//for loop ends
      }
}

 //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;
}

Get Formatted Version Of Above Script

The above script could be used as:

<a href="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', true)">Expand All</a>
<a href="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', false)">Collapse All</a>
<asp:TreeView ID="TreeView1" .....................

That's all there is to it.

Hope this is helpful.

Update (7/25/2008): The script has been updated to fix a minor bug concerning the toggle images being screwed up if ShowLines is false for the treeview. Thanks to comments from users, particularly to ryan.

pushp