Expand and Collapse All Nodes of asp.net Treeview on the client with javascript

Last post 12-08-2006 2:12 PM by snelldl. 1 replies.

Sort Posts:

  • Expand and Collapse All Nodes of asp.net Treeview on the client with javascript

    12-04-2006, 7:27 AM
    • Contributor
      2,209 point Contributor
    • pushp_aspnet
    • Member since 10-19-2006, 1:27 PM
    • Hyderabad,India
    • Posts 447

    It was on one of the other forums that this reqiurement was put. It was required to collapse all treeview nodes on the client with javascript.

    So, i wrote some script to accomplish the task and realizing that the script to Expand all nodes will not be  very different, i did a minor modification to get it working for the expand all case. Now with this script we can save a server trip for just expanding or collapsing all nodes. I have tested the script in IE7 & FF2.0 and it works fine in both. Below i give the script:

    1)Expand all nodes

    ------------------------------------------------------------------------------------

    function expandAll(treeViewId)
        {
             var treeView = document.getElementById(treeViewId);
             var treeLinks = treeView.getElementsByTagName("a");
             var j = true;
             for(i=0;i<treeLinks.length;i++)
             {
                  if(treeLinks[i].firstChild.tagName == "IMG")
                  {
                    var node = treeLinks[i];
                    var level = parseInt(treeLinks[i].id.substr(treeLinks[i].id.length - 1),10);
                    var childContainer = document.getElementById(treeLinks[i].id + "Nodes");
                   
                   if(j)
                    {
                        if(childContainer.style.display == "none")
                        TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'r',childContainer);
                        j = false;
                    }
                    else
                    {
                        if(childContainer.style.display == "none")
                        TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'l',childContainer);
                    }
                  }
              }
       }              

    --------------------------------------------------------------------------------------------

    2)Collapse all nodes:

    -------------------------------------------------------------------------------------------

    function collapseAll(treeViewId)
        {
             var treeView = document.getElementById(treeViewId);
             var treeLinks = treeView.getElementsByTagName("a");
             var j = true;
             for(i=0;i<treeLinks.length;i++)
             {
                  if(treeLinks[i].firstChild.tagName == "IMG")
                  {
                    var node = treeLinks[i];
                    var level = parseInt(treeLinks[i].id.substr(treeLinks[i].id.length - 1),10);
                    var childContainer = document.getElementById(treeLinks[i].id + "Nodes");
                   
                   if(j)
                    {
                        if(childContainer.style.display == "block")
                        TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'r',childContainer);
                        j = false;
                    }
                    else
                    {
                        if(childContainer.style.display == "block")
                        TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'l',childContainer);
                    }
                  }
              }
       }     

    ---------------------------------------------------------------------------------------------------------------------------------

    The functions require the treeview id to be passed. Hope this works fine.

    cheers!! 

     

    Home Is Where the Wind Blows
    http://pushpontech.blogspot.com
  • Re: Expand and Collapse All Nodes of asp.net Treeview on the client with javascript

    12-08-2006, 2:12 PM
    • Member
      42 point Member
    • snelldl
    • Member since 08-15-2006, 4:10 PM
    • Hillsdale, MI
    • Posts 48
    I've used your code, but the expand part doesn't put the little minus sign images next to the text of each node.
Page 1 of 1 (2 items)