This is a migrated thread and some comments may be shown as answers.

Expand/Collapse All Nodes passing a variable to JS function

12 Answers 127 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Chris Salas
Top achievements
Rank 1
Chris Salas asked on 19 Jan 2012, 11:12 PM
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.

12 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 20 Jan 2012, 05:13 AM
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.
0
Chris Salas
Top achievements
Rank 1
answered on 20 Jan 2012, 02:54 PM
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);



0
Marbry
Top achievements
Rank 1
answered on 20 Jan 2012, 03:36 PM
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.
0
Chris Salas
Top achievements
Rank 1
answered on 20 Jan 2012, 03:40 PM
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.
0
Marbry
Top achievements
Rank 1
answered on 20 Jan 2012, 03:46 PM
So just populate a delimited list of ID's in there and parse it in the javascript?
0
Chris Salas
Top achievements
Rank 1
answered on 20 Jan 2012, 08:47 PM
I tried this and it didn't work (or I did it wrong).  Thanks for the ideas though.  They are appreciated. 
0
Accepted
Marbry
Top achievements
Rank 1
answered on 20 Jan 2012, 09:13 PM
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
}
0
Chris Salas
Top achievements
Rank 1
answered on 20 Jan 2012, 09:28 PM
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();
                }
            }
        }
    }
}
0
Marbry
Top achievements
Rank 1
answered on 20 Jan 2012, 10:49 PM
Sweet, I'm glad you got it worked out.
0
Divvu
Top achievements
Rank 1
answered on 17 Apr 2014, 07:35 AM
In aboove of ur passing treeid variable rt???what i sdat variable..it indicates wat?
0
Shinu
Top achievements
Rank 1
answered on 17 Apr 2014, 10:20 AM
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.
0
Chris Salas
Top achievements
Rank 1
answered on 17 Apr 2014, 12:40 PM
In this instance it is the ID of the RadTree that you need to collapse or expanded.
Tags
TreeView
Asked by
Chris Salas
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Chris Salas
Top achievements
Rank 1
Marbry
Top achievements
Rank 1
Divvu
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or