RadTreeView for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

The table below lists the most important functions of the client-side RadTreeView object. Many significant functions for performing common tasks such as adding, inserting and removing Nodes are actually performed using the RadTreeNodeCollection object.

 

Name

Parameters

Return Type

Description

trackChanges

none

none

Starts tracking changes made to the TreeView that will be preserved on the server.

commitChanges

none

none

Writes the changes to the TreeView that were made since a previous call to trackChanges, so that they are preserved on the server as well.

Tip

Client side changes are available on the server side after postback. You can use the ClientChanges property to access them.

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

findNodeByText

string

RadTreeNode

Gets the first instance of a Node with the specified text.

CopyJavaScript
        function FindNode() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            var node = tree.findNodeByText("Child RadTreeNode 1");
            node.select();
        }
 

findNodeByValue

string

RadTreeNode

Gets the first instance of a Node with the specified value.

CopyJavaScript
        function FindNode() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            var node = tree.findNodeByValue("3");
            node.get_parent().expand();
            node.select();
        }
 

findNodeByAttribute

string (attribute name), string (attribute value)

RadTreeNode

Gets the first instance of a Node with the specified attribute, value pair.

CopyJavaScript
        function FindNode() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            var node = tree.findNodeByAttribute("MyCustomAttribute", "Some Value");
            node.get_parent().expand();
            node.select();
        }
 

findNodeByUrl

(string URL)

RadTreeNode

Returns the first RadTreeNode object whose NavigateUrl property is equal to the passed parameter.

findNodeByAbsoluteUrl

(string URL)

RadTreeNode

Returns the first RadTreeNode object whose NavigateUrl property is equal to the passed parameter. Note that the parameter should ends with '/' like:

var item = sender.findNodeByAbsoluteUrl('http://www.test.com/');

get_selectedNodes

none

Array

Gets an Array of all selected Nodes (useful when MultipleSelect property is on).

CopyJavaScript
        function GetSelectedNodes() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            var nodes = tree.get_selectedNodes();
            for (var i = 0; i < nodes.length; i++) {
                alert(nodes[i].get_text());
            }
        }
 

unselectAllNodes

none

none

Un-selects all Nodes at all levels of the tree.

CopyJavaScript
        function UnSelectAllNodes() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            tree.unselectAllNodes();
        }
 

get_nodes

none

Telerik.Web.UI.RadTreeNodeCollection

Returns the root level RadTreeNodeCollection. This example iterates the root level Nodes.

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

get_allNodes

none

none

Returns an array of all the Nodes within the TreeView.

CopyJavaScript
        function GetNodes() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            var nodes = tree.get_allNodes();
            for (var i = 0; i < nodes.length; i++) {
                alert(nodes[i].get_text());
            }
        }
 

get_selectedNode

none

none

Gets the instance of the currently selected Node. Null if none.

CopyJavaScript
        function GetSelectedNode() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            if (tree.get_selectedNode() != null) {
                alert(tree.get_selectedNode().get_text());
            }
        }
 

get_id

none

string

Gets the server ID of the control.

CopyJavaScript
        function GetID() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            alert(tree.get_id());
        }
 

get_element

none

DOM Element

Gets a reference to the DIV element that wraps the TreeView.

CopyJavaScript
        function GetElement() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            alert(tree.get_element().innerHTML);
        }
 

get_enabled

none

Boolean

Gets the enabled state of the TreeView.

set_enabled

Boolean

none

Enables/Disables the TreeView.

CopyJavaScript
        function disableTreeView() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            if (tree.get_enabled()) {
                tree.set_enabled(false);
            }
            else {
                tree.set_enabled(true);
            }
        }
 

get_loadingMessage

none

String

Returns the value of the RadTreeView's LoadingMessage property. The default value is "Loading..."

set_loadingMessage

String

none

Sets a loading message to the TreeView.

CopyJavaScript
        function pageLoad() {
            var tree = $find("<%= RadTreeView1.ClientID %>");
            tree.set_loadingMessage("loading");
        }
 

get_childListElement

none

HTML Element

Returns the UL HTML element which contains the HTML elements of the root Nodes. Null if there are no root Nodes.

get_allowNodeEditing

none

Boolean

True if the AllowNodeEditing property is enabled, false otherwise.

set_allowNodeEditing

Boolean

none

Enables/Disables Node-editing.

get_enableDragAndDrop

none

Boolean

True if the EnableDragAndDrop property is enabled, false otherwise.

set_enableDragAndDrop

Boolean

none

Enables/Disables drag and drop.

get_enableDragAndDropBetweenNodes

none

Boolean

True if the EnableDragAndDropBetweenNodes property is enabled, false otherwise.

set_enableDragAndDropBetweenNodes

Boolean

none

Enables/Disables the drag and drop between Nodes.

get_persistLoadOnDemandNodes

none

Boolean

True if the PersistLoadOnDemandNodes property is enabled, false otherwise.

set_persistLoadOnDemandNodes

Boolean

none

Enables/Disables the persistence (at the server-side) of Nodes added on demand.

get_checkedNodes

none

Array

Returns an array of the checked nodes when CheckBoxes="True"

get_draggingClueElement

none

DIV

Returns the div element of the dragged node (during OnClientNodeDragging event handler)

set_singleExpandPath

Boolean

none

Allows only a single node to be expanded when set to true. On expanding a second node, the first one returns to its initial state(that is collapsed).

get_singleExpandPath

none

Boolean

Returns true if the singleExpandPath property is enabled, false otherwise.

addNodesTo

RadTreeNode, Array of RadTreeNode objects

none

Adds child Nodes to the Nodes collection of a Node (defined as first parameter)

checkAllNodes

none

none

Checks all Nodes at all levels of the tree

uncheckAllNodes

none

none

Un-checks all Nodes at all levels of the tree

checkNodes

Array of RadTreeNode objects or RadTreeNodeCollection

none

Checks the defined in the parameter Nodes

uncheckNodes

Array of RadTreeNode objects or RadTreeNodeCollection

none

Un-checks the defined in the parameter Nodes

selectAllNodes

none

none

Selects all Nodes at all levels of the tree

selectNodes

Array of RadTreeNode objects or RadTreeNodeCollection

none

Selects the defined in the parameter Nodes

unselectNodes

Array of RadTreeNode objects or RadTreeNodeCollection

none

Un-selects the defined in the parameter Nodes

bulkUpdateWith

function

none

Bulks update operations over the current TreeView instance, executed in the passed function. bulkUpdateWith is one of the many performance optimizations made on RadTreeView and basically allows the users to perform multiple changes in the TreeView instance (add/remove/expand/collapse/select/unselect/check/uncheck nodes and so on) as a single update over the inner state representation.

CopyJavaScript
function updateTreeView(tree)
{
    tree.bulkUpdateWith(func);
}

function func()
{
    var tree = $find("RadTreeView1");
    var nodes = tree.get_nodes();
    var nodesCount = nodes.get_count();

    for (var i = 0; i < nodesCount; i++)
    {
        var node = nodes.getNode(i);
        // add a childNode
        var childNode = new Telerik.Web.UI.RadTreeNode();
        childNode.set_text("childNode");
        node.get_nodes().add(childNode);
        // perform other changes on the node
        node.set_expanded(true);
        node.set_checked(true);
        node.set_selected(true);
    }
}