New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

RadTreeView

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.

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

 

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.(see Example 1)
findNodeByText string RadTreeNode Gets the first instance of a Node with the specified text. (see Example 2)
findNodeByValue string RadTreeNode Gets the first instance of a Node with the specified value. (see Example 3)
findNodeByAttribute string (attribute name), string (attribute value) RadTreeNode Gets the first instance of a Node with the specified attribute, value pair. (see Example 4)
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). (see Example 5)
unselectAllNodes none none Un-selects all Nodes at all levels of the tree. (see Example 6)
get_nodes none Telerik.Web.UI.RadTreeNodeCollection Returns the root level RadTreeNodeCollection. This example iterates the root level Nodes. (see Example 7)
get_allNodes none Array of RadTreeNode objects Returns an array of all the Nodes within the TreeView. (see Example 8)
get_selectedNode none none Gets the instance of the currently selected Node. Null if none. (see Example 9)
get_id none string Gets the server ID of the control. (see Example 10)
get_element none DOM Element Gets a reference to the DIV element that wraps the TreeView. (see Example 11)
get_enabled none Boolean Gets the enabled state of the TreeView.
set_enabled Boolean none Enables/Disables the TreeView. (see Example 12)
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. (see Example 13)
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. (see Example 14)

Example 1: Demonstrates the usage of the trackChanges method

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

When adding a node client-side, the node should be created, added to the nodes collection and then has its properties customized.

Example 2: Demonstrates the usage of the findNodeByText method

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

Example 3: Demonstrates the usage of the findNodeByValue method

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

Example 4: Demonstrates the usage of the findNodeByAttribute method

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

Example 5: Demonstrates the usage of the get_selectedNodes method

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

Example 6: Demonstrates the usage of the unselectAllNodes method

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

Example 7: Demonstrates the usage of the get_nodes method

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

Example 8: Demonstrates the usage of the get_allNodes method

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

Example 9: Demonstrates the usage of the get_selectedNode method

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

Example 10: Demonstrates the usage of the get_id method

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

Example 11: Demonstrates the usage of the get_element method

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

Example 12: Demonstrates the usage of the get_element method

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

 

Example 13: Demonstrates the usage of the set_loadingMessage method

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

  caption Example 14: Demonstrates the usage of the bulkUpdateWith method

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

}

In this article