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");
    node.get_parent().expand();
    node.select();
}

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.

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

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);
        node.select();
    }
</script>

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
    <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView2" runat="server" Skin="Hay">
        <Nodes>
            <telerik:RadTreeNode runat="server" Text="Products" ExpandMode="ClientSide">
                <Nodes>
                    <telerik:RadTreeNode runat="server" Text="Books" ExpandMode="ClientSide">
                        <Nodes>
                            <telerik:RadTreeNode runat="server" Text="Fiction">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Non-Fiction">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Biography">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode runat="server" Text="Humor">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
        </Nodes>
    </telerik:RadTreeView>
    <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>
</div>
</form>

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);
        alert(node.get_text());
    }
}

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 %>");
    tree.trackChanges();
    var node = new Telerik.Web.UI.RadTreeNode();
    node.set_text("New Node");
    tree.get_nodes().add(node);
    tree.commitChanges();
}

See Also

• RadTreeView

• RadTreeNode

• RadTreeNodeCollection