Expand/Collapse All Nodes passing a variable to JS function

13 posts, 1 answers
  1. Chris Salas
    Chris Salas avatar
    46 posts
    Member since:
    Oct 2009

    Posted 19 Jan 2012 Link to this post

    I have a dynamically created tree view and I would like to add the functionality to Expand/Collapse all nodes via javascript.  All of the demos and posts i have looked at have the following: 
    function treeExpandAllNodes() {
        var treeView = $find("<%= rtvMain.ClientID %>");
        var nodes = treeView.get_allNodes();
      
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].get_nodes() != null) {
                nodes[i].expand();
            }
        }
    }

    However in my case i can not use the rtvMain.ClientID in  my functions.  Is there a way to accomplish this passing a variable into the function?  Everything i have tried throws an error saying some to the fact of .get_allNodes is not a member of null.  Please help.

    Thank you.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 19 Jan 2012 Link to this post

    Hello,

    Try the following code snippet to pass ClientID to a JS function via code behind.
    C#:
    protected void Page_Load(object sender, EventArgs e)
       {
           RadTreeView RadTreeView1 = new RadTreeView();
             ... ... ...  // creation of RadTreeView
           
           form1.Controls.Add(RadTreeView1);
           Button Button1= new Button();
           Button1.Text = "Expand";
           Button1.Attributes.Add("onclick","test('"+RadTreeView1.ClientID+"');return false");
           form1.Controls.Add(Button1);
        }

    JS:
    <script type="text/javascript" >
     function test(id)
       {
        var treeView = $find(id);
        var nodes = treeView.get_allNodes();
        for (var i = 0; i < nodes.length; i++)
        {
          if (nodes[i].get_nodes() != null)
          {
               nodes[i].expand();
          }
       }
     }
    </script>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris Salas
    Chris Salas avatar
    46 posts
    Member since:
    Oct 2009

    Posted 20 Jan 2012 Link to this post

    Princy,

    I tried this code and it did not work.  I received the following error: Uncaught TypeError: Cannot call method 'get_allNodes' of null. Below is the code i am using:
    JS:
    function expandAllNodes(treeid) {
        var treeView = $find(treeid);
        var nodes = treeView.get_allNodes();
     
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].get_nodes() != null) {
                nodes[i].expand();
            }
        }
      
    function collapseAllNodes(treeid) {
        var treeView = $find(treeid);
        var nodes = treeView.get_allNodes();
     
        for (var i = 0; i < nodes.length; i++) {
            if (nodes[i].get_nodes() != null) {
                nodes[i].collapse();
            }
        }
    }

    C#
    //Add a MultiPage for the AbilityType
    Telerik.Web.UI.RadPageView tmpPageView = new Telerik.Web.UI.RadPageView();
    tmpPageView.ID = "radPV" + type.AbilityType.Name.Replace(" ", "_");
    radMPCapabilities.PageViews.Add(tmpPageView);
     
    //Add a Tab for the AbilityType
    Telerik.Web.UI.RadTab tmpTab = new Telerik.Web.UI.RadTab(type.AbilityType.Name, type.AbilityType.ID.ToString());
    tmpTab.PageViewID = tmpPageView.ID;
    radTSCapabilities.Tabs.Add(tmpTab);
     
    //Create and Load the Rad Tree
    Telerik.Web.UI.RadTreeView radTree = new Telerik.Web.UI.RadTreeView();
    radTree.Skin = "Default";
    radTree.NodeDataBound += new Telerik.Web.UI.RadTreeViewEventHandler(radTree_NodeDataBound);
    radTree.ID = "radTree" + type.AbilityType.Name.Replace(" ", "_");
    radTree.DataTextField = "Name";
    radTree.DataFieldID = "ID";
    radTree.DataFieldParentID = "ParentID";
    radTree.DataValueField = "ID";
     
    //If the control is in Edit mode then show the checkboxes
    if (TreeDisplayMode == Directory_BO.Enums.AbilityTree_DisplayMode.Edit)
    {
        radTree.CheckBoxes = true;
        radTree.TriStateCheckBoxes = true;
        radTree.CheckChildNodes = true;
    }
     
    //If there are multiple Ability Types in result set then go to the DB to get all Abilities for that type
    if (distinctAbilityTypes.Count() != 1)
    {
        if (TreeDisplayMode == Directory_BO.Enums.AbilityTree_DisplayMode.View)
        {
            switch (TreeContentType)
            {
                case Directory_BO.Enums.AbilityTree_ContentType.Employee:
                    radTree.DataSource = AbilityMgr.GetAbilitiesByContactIDANDAbilityTypeID(ContactID, type.AbilityType.ID);
                    break;
                case Directory_BO.Enums.AbilityTree_ContentType.Office:
                    radTree.DataSource = AbilityMgr.GetAbilitiesByOfficeIDANDAbilityTypeID(OfficeID, type.AbilityType.ID);
                    break;
            }
        }
        else
            radTree.DataSource = AbilityMgr.GetAbilitiesByAbilityTypeID(type.AbilityType.ID);
    }
    else
        radTree.DataSource = abilities;
     
    //Bind the Tree
    radTree.DataBind();
     
    //Add a top border
    Literal tmpLiteral = new Literal();
    tmpLiteral.Text = "<div style='border-top:solid 1px #AAAAAA;'></div>";
     
    //Add the Links for Expand all
    Literal tmpExpandAll = new Literal();
    tmpExpandAll.Text = "<a href='javascript:expandAllNodes(\"" + radTree.ClientID + "\");return false;'>Expand All</a> | ";
     
    //Add the Links for Collapse all
    Literal tmpCollapseAll = new Literal();
    tmpCollapseAll.Text = "<a href='javascript:collapseAllNodes(\"" + radTree.ClientID + "\");return false;'>Collapse All</a>";
     
    //Add the Literal and Tree to the associated PageView
    radMPCapabilities.FindControl(tmpPageView.ID).Controls.Add(tmpLiteral);
    radMPCapabilities.FindControl(tmpPageView.ID).Controls.Add(tmpExpandAll);
    radMPCapabilities.FindControl(tmpPageView.ID).Controls.Add(tmpCollapseAll);
    radMPCapabilities.FindControl(tmpPageView.ID).Controls.Add(radTree);



  5. Marbry
    Marbry avatar
    26 posts
    Member since:
    Aug 2012

    Posted 20 Jan 2012 Link to this post

    Have you tried the first snippet you sent, but passing the ClientID in a hidden input tag with the value set on the server?

    That way you're just retrieving the ID from the input on the client side.
  6. Chris Salas
    Chris Salas avatar
    46 posts
    Member since:
    Oct 2009

    Posted 20 Jan 2012 Link to this post

    I am generating multiple TreeViews and they are not all always going to be there.  Also the names of the TreeViews are set dynamically via data from the DB.  The C# code below in a for loop.
  7. Marbry
    Marbry avatar
    26 posts
    Member since:
    Aug 2012

    Posted 20 Jan 2012 Link to this post

    So just populate a delimited list of ID's in there and parse it in the javascript?
  8. Chris Salas
    Chris Salas avatar
    46 posts
    Member since:
    Oct 2009

    Posted 20 Jan 2012 Link to this post

    I tried this and it didn't work (or I did it wrong).  Thanks for the ideas though.  They are appreciated. 
  9. Answer
    Marbry
    Marbry avatar
    26 posts
    Member since:
    Aug 2012

    Posted 20 Jan 2012 Link to this post

    I'm actually doing this very thing, although with a variety of other generated controls.

    You can check what's actually generated, you may need to set the ClientIDMode to force the ClientID == ID.

    I populate the list of ID's and just stick the list into an input as a comma delimited string.
    string controlList = "";
    .
    .
    controlList += tree.ID + ",";
    .
    .
    if (controlList.Length > 0)
                    controlList = controlList.Substring(0, controlList.Length - 1);
    txtControlList.Value = controlList;

    Then I just split that back out on the client side to get the individual ID's.
    var controlIDArray = txtControlsList.value;
    var arrID = controlIDArray.split(",");
      
    for (var i = 0; i < arrID.length; i++)
    {
        var arrItem = arrID[i].split("~");
          
        var treeRef = document.getElementById(arrItem[i]);
        if (treeRef != null)
            // Do something with the tree
    }
  10. Chris Salas
    Chris Salas avatar
    46 posts
    Member since:
    Oct 2009

    Posted 20 Jan 2012 Link to this post

    That worked awesome.  I did do it wrong.  Here is what I ended up with:
    //Expands all Nodes of a Telerik RadTreeView
    function expandNodes(treeid) {
        var controlIDArry = document.getElementById("txtControlList").value.split(",");
        for (var i = 0; i < controlIDArry.length; i++) {
            if (controlIDArry[i].indexOf(treeid) != -1) {
                var treeView = $find(controlIDArry[i]);
                var nodes = treeView.get_allNodes();
                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i].get_nodes() != null) {
                        nodes[i].expand();
                    }
                }
            }
        }
    }
     
    //Collapses all Nodes of a Telerik RadTreeView
    function collapseNodes(treeid) {
        var controlIDArry = document.getElementById("txtControlList").value.split(",");
        for (var i = 0; i < controlIDArry.length; i++) {
            if (controlIDArry[i].indexOf(treeid) != -1) {
                var treeView = $find(controlIDArry[i]);
                var nodes = treeView.get_allNodes();
                for (var i = 0; i < nodes.length; i++) {
                    if (nodes[i].get_nodes() != null) {
                        nodes[i].collapse();
                    }
                }
            }
        }
    }
  11. Marbry
    Marbry avatar
    26 posts
    Member since:
    Aug 2012

    Posted 20 Jan 2012 Link to this post

    Sweet, I'm glad you got it worked out.
  12. Divvu
    Divvu avatar
    1 posts
    Member since:
    Apr 2014

    Posted 17 Apr 2014 in reply to Chris Salas Link to this post

    In aboove of ur passing treeid variable rt???what i sdat variable..it indicates wat?
  13. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 17 Apr 2014 in reply to Divvu Link to this post

    Hi Divvu,

    I guess that you want to expand and collapse the RadTreeView nodes from the client side. Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadTreeView ID="radtreeExpandCollapse" runat="server">
        <Nodes>
            <telerik:RadTreeNode Text="Node1">
                <Nodes>
                    <telerik:RadTreeNode Text="Node1.1">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Node1.2">
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
            <telerik:RadTreeNode Text="Node2">
                <Nodes>
                    <telerik:RadTreeNode Text="Node2.1">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Node2.2">
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
        </Nodes>
    </telerik:RadTreeView>
    <telerik:RadButton ID="radbtnExpandTree" runat="server" Text="Expand Tree" AutoPostBack="false" OnClientClicked="ExpandTree">
    </telerik:RadButton>
     <telerik:RadButton ID="radbtnCollapseTree" runat="server" Text="Collapse Tree" AutoPostBack="false" OnClientClicked="CollapseTree">
    </telerik:RadButton>

    JavaScript:
    <script type="text/javascript">
        function ExpandTree(sender, args) {
            var treeView = $find("<%=radtreeExpandCollapse.ClientID %>");
            for (var counter = 0; counter < treeView.get_allNodes().length; counter++) {
                treeView.get_allNodes()[counter].expand();
            }
        }
        function CollapseTree(sender, args) {
            var treeView = $find("<%=radtreeExpandCollapse.ClientID %>");
            for (var counter = 0; counter < treeView.get_allNodes().length; counter++) {
                treeView.get_allNodes()[counter].collapse();
            }
        }
    </script>

    Please elaborate your requirement if it doesn't help.
    Thanks,
    Shinu.
  14. Chris Salas
    Chris Salas avatar
    46 posts
    Member since:
    Oct 2009

    Posted 17 Apr 2014 in reply to Divvu Link to this post

    In this instance it is the ID of the RadTree that you need to collapse or expanded.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017