Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TreeView > How do I expand/collapse nodes on the client side

• Tonyz289

  Posted on Feb 6, 2012 (permalink)

  I want to expand/collapse nodes by clicking on the plus-minus graphic on the client side (Javascript). When I try to do it I can only click on the text of the node.
  
  How do I do this?
  Tree definition bellow:
  
  

  <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="True" MultipleSelect="True"

      EnableViewState="true" ShowLineImages="False" EnableEmbeddedSkins="False" Skin="tree_2"

      OnNodeClick="RadTreeView1_NodeClick" OnNodeDataBound="RadTreeView1_NodeDataBound" >

      <NodeTemplate>

          <small>

              <asp:Label ID="lblnodeText" Text='<%#Eval("Title") %>' runat="server" /><asp:Label

                  ID="lblCatId" Text='<%#Eval("Id") %>' runat="server" Visible="false"></asp:Label><asp:Label

                      ID="lblisCustomer" Text='<%#Eval("isCustomer") %>' runat="server" Visible="false"></asp:Label><asp:Label

                          ID="Description" runat="server" Text='<%#Eval("description") %>' Visible="false" /><asp:HiddenField

                              ID="DescriptionVisible" runat="server" Value='<%#Eval("descriptionVisible") %>' />

              <a href="javascript:Popup_Window('category_detail','<%# Eval("id") %>')" style="text-decoration: none;">

                  <span style="color: #BBBBBB">e</span></a></small></NodeTemplate>

  </telerik:RadTreeView>

  
  

  Reply

• Princy MVP

  Posted on Feb 6, 2012 (permalink)

  Hello,
  
  Try to expand/collapse the nodes in OnClientNodeExpanded and OnClientNodeCollapsed client side events.
  JS:
  

  function OnClientNodeExpanded()

   {

    var tree = $find("<%=RadTreeView1.ClientID %>");

    var node = tree.get_allNodes();

    for (i = 0; i < node.length; i++)

     {

      if (node[i].get_nodes() != null)

       {

        node[i].expand(true);

       }

     }

    }

  function OnClientNodeCollapsed()

   {

    var tree = $find("<%=RadTreeView1.ClientID %>");

    var node = tree.get_allNodes();

    for (i = 0; i < node.length; i++)

     {

      if (node[i].get_nodes() != null)

       {

        node[i].collapse();

       }

     }

   }

  
  Thanks,
  Princy.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TreeView > How do I expand/collapse nodes on the client side