Client-side Programming Overview | RadTreeView for ASP.NET AJAX Documentation
Edit this page

Client-side Programming Overview

RadTreeView provides a flexible client-side API that allows you to interact with the TreeView, Nodes collection and individual Nodes, all on the client.

Getting the RadTreeView client-side object

RadTreeView creates a client-side object with the ClientID of the TreeView. You can obtain the reference by using the $find() function and passing in the ClientID of the TreeView.

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

Getting a RadTreeNode client-side object

Once you get the client-side object of RadTreeView, you can use one of the  client RadTreeView object functions findNodeByText(), findNodeByValue() or findNodeByAttribute() to get the instance of a particular Node.

function FindNode() {
    var tree = $find("<%= RadTreeView1.ClientID %>");
    var node = tree.findNodeByText("Child RadTreeNode 1");
    //... or ...
    var node1 = tree.findNodeByValue("3");
    //... or ...
    var node2 = tree.findNodeByAttribute("MyCustomAttribute", "Some Value");

Using RadTreeNode Object client-side functions

Once you have a client-side reference to a Node, you can call functions to

  • enable/disable

  • select/deselect

  • highlight/unhighlight

  • check/uncheck/toggle

  • expand/collapse

  • showLoadingStatus/hideLoadingStatus

  • startEdit/endEdit

See the RadTreeNode Object topic for more specifics on calling these functions.

For example, the selectNode function below demonstrates getting a client-side reference to a RadTreeView, finding a specific Node and selecting it.

RadTreeView Client-Side Basics

function selectNode(text) {
    var treeView = $find("<%= RadTreeView2.ClientID %>");
    var node = treeView.findNodeByText(text);;

The full project shows several links that call selectNode() with text of specific Nodes to find. When the user clicks on the link the corresponding Node is found and highlighted.

<script language="javascript" type="text/javascript">
    function selectNode(text) {
        var treeView = $find("<%= RadTreeView2.ClientID %>");
        var node = treeView.findNodeByText(text);;

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
    <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server" Skin="Hay">
            <telerik:RadTreeNode runat="server" Text="Products" ExpandMode="ClientSide">
                    <telerik:RadTreeNode runat="server" Text="Books" ExpandMode="ClientSide">
                            <telerik:RadTreeNode runat="server" Text="Fiction">
                            <telerik:RadTreeNode runat="server" Text="Non-Fiction">
                            <telerik:RadTreeNode runat="server" Text="Biography">
                            <telerik:RadTreeNode runat="server" Text="Humor">
    <a href="javascript: selectNode('Fiction');" class="RadTreeView_Hay">Find Fiction</a>
    <a href="javascript: selectNode('Non-Fiction');" class="RadTreeView_Hay">Find Non-Fiction</a>
    <a href="javascript: selectNode('Biography');" class="RadTreeView_Hay">Find Biography</a>
    <a href="javascript: selectNode('Humor');" class="RadTreeView_Hay">Find Humor</a>

Using the RadTreeNodeCollection client-side Object

To operate on all Nodes of a collection of Nodes use the RadTreeNodeCollection object. You can get a reference to this collection through the get_nodes() function of RadTreeNode object or use the following functions of the client RadTreeView object:

  • get_selectedNodes

  • get_nodes

  • get_allNodes

function GetNodes() {
    var tree = $find("<%= RadTreeView1.ClientID %>");
    for (var i = 0; i < tree.get_nodes().get_count(); i++) {
        var node = tree.get_nodes().getNode(i);

Once you have a reference to a RadTreeNodeCollection object you can call its functions to add, insert, and remove Nodes, as well as getting the index of a particular Node or the count of all Nodes in the collection.

function AddNode() {
    var tree = $find("<%= RadTreeView1.ClientID %>");
    var node = new Telerik.Web.UI.RadTreeNode();
    node.set_text("New Node");

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article