Expand/Collapse All Nodes passing a variable to JS function

[Chris Salas]

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.

[Princy]

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.

[Chris Salas]

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);

[Marbry]

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.

[Chris Salas]

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.

[Marbry]

So just populate a delimited list of ID's in there and parse it in the javascript?

[Chris Salas]

I tried this and it didn't work (or I did it wrong).  Thanks for the ideas though.  They are appreciated. 

[Marbry]

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
}

[Chris Salas]

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();
                }
            }
        }
    }
}

[Marbry]

Sweet, I'm glad you got it worked out.

[Divvu]

In aboove of ur passing treeid variable rt???what i sdat variable..it indicates wat?

[Shinu]

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.

[Chris Salas]

In this instance it is the ID of the RadTree that you need to collapse or expanded.