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

The table below lists the most important function of the RadTreeNode object.

Caution

When setting a property to a node via the methods below, first make sure that the node is already added to the treeview to prevent javascript errors on the page.

 

Name

Parameters

Return Type

Description

findControl

String

Object

Returns the client-side object of the Control with the specified ID nested in the Node's Template. The ID passed as an argument to the function MUST be the ID attribute of the nested Control.

toJsonString

none

string

Returns the JSON representation of the node (serialize the node as a string in JSON format).

get_previousNode

none

RadTreeNode

Gets an instance of the previous sibling of a Node.

CopyJavaScript
     
function GetPreviousNode()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Child RadTreeNode 2");
   if(node)
   {
       var prevNode = node.get_previousNode();
       prevNode.get_parent().expand();
       prevNode.select();
   }
}
 

get_nextNode

none

RadTreeNode

Gets an instance of the next sibling of a Node.

CopyJavaScript
     
function GetNextNode()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Child RadTreeNode 1");
   if(node)
   {
       var prevNode = node.get_nextNode();
       prevNode.get_parent().expand();
       prevNode.select();
   }
}
 

expand & collapse

none

none

expand() opens a Node to display child Nodes. collapse() closes a Node to hide child Nodes.

CopyJavaScript
function ExpandNode()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       node.expand();
       //node.collapse();
   }
}     

        //node.collapse();    }}
 

set_expanded

bool

none

Expands or collapses a Node.

CopyJavaScript
function SetExpanded()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_expanded())    
       {       
           node.set_expanded(false);    
       }    
       else    
       {       
           node.set_expanded(true);     
       }          
   }
}
 

toggle

none

none

Collapses an expanded Node or expands a collapsed Node.

CopyJavaScript
function ToggleNode()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       node.toggle();
   }
}
 

highlight & unhighlight

none

none

Highlights or un-highlights a Node. Highlighted Nodes are visually emphasized. The specific display is dictated by the Skin.

CopyJavaScript
function HighlightNode()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       node.highlight();
       //node.unhighlight();
   }
}
 

select & unselect

none

none

Select or unselect a Node. Selecting a Node typically emphasizes the Node. The specific display is dictated by the Skin. Highlighting and selecting have similar but not identical displays.

If selecting a Node with a mouse does postback, calling the select() function will select the Node and do postback.

CopyJavaScript
function SelectNode()
{
   var tree= $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if (node)
   {
       if (node.get_selected())
       {
           node.unselect();
       }
       else
       {
           node.select();
       }
   }  
}
 

set_selected

bool

none

Selects or unselects a Node based on the boolean parameter.

If selecting a Node with a mouse does postback, calling the set_selected(true) function will select the Node but will NOT do postback.

CopyJavaScript
function SetSelected()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_selected())    
       {       
           node.set_selected(false);    
       }    
       else    
       {       
           node.set_selected(true);     
       }          
   }
}
 

enable & disable

none

none

disable() makes a Node inactive and unclickable. Typically the Node is displayed in a lighter color dictated by the style setting of the Skin. enable() returns the Node to a usable, clickable state. disable is a functionally equivalent to set_enabled(false) and enable() is equivalent to set_enabled(true).

CopyJavaScript
     
function SetEnabled()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_enabled())    
       {        
           node.disable();     
       }    
       else    
       {          
           node.enable();
       }          
   }
}
 

set_enabled

bool

none

Enables or disables a Node based on the boolean parameter passed in. set_enabled(false) is a functionally equivalent to disable() and set_enabled(true) is equivalent to enable().

CopyJavaScript
function SetEnabled()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_enabled())    
       {       
           node.set_enabled(false);
           //node.disable();     
       }    
       else    
       {       
           node.set_enabled(true);     
           //node.enable();
       }          
   }
}
 

check & uncheck

none

none

Marks or unmarks the checkbox for a Node. check() is a functionally equivalent to set_checked(true) and uncheck() is equivalent to set_checked(false);

CopyJavaScript
function SetChecked()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_checked())    
       {       
           //node.set_checked(false);      
           node.uncheck();      
       }    
       else    
       {       
           //node.set_checked(true);
           node.check();
       }          
   }
}
 

set_checked

bool

none

Marks or unmarks the checkbox for a Node. check() is a functionally equivalent to set_checked(true) and uncheck() is equivalent to set_checked(false);

CopyJavaScript
     
function SetChecked()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_checked())    
       {        
           node.set_checked(false);      
           //node.uncheck();      
       }    
       else    
       {       
           node.set_checked(true);
           //node.check();
       }          
   }
}
 

get_checkState

none

Telerik.Web.UI.TreeNodeCheckState

Returns the current check state of a node. It can be one of the following:

Telerik.Web.UI.TreeNodeCheckState.Unchecked, Telerik.Web.UI.TreeNodeCheckState.Checked or Telerik.Web.UI.TreeNodeCheckState.Indeterminate

startEdit

none

none

Allows the Node to be edited. This is equivalent to the user clicking the Node twice or pressing F2.

CopyJavaScript
     
function Edit()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       node.set_text("Rename this node");
       node.startEdit();         
   }
}
 

endEdit

none

none

Takes the Node out of editing mode.

CopyJavaScript
var text;
function Edit()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       text = node.get_text();
       node.startEdit();         
   }
}
function EndEdit()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if (node.get_text() != text)
       {
           node.endEdit();        
       }
       else
       {
           alert("no changes were made");
       }
   }
}
 

get_checkBoxElement

none

DOM Element

Gets the DOM Element of the checkbox.

CopyJavaScript
function GetCheckBoxElement()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       alert(node.get_checkBoxElement().className);
   }
}
 

scrollIntoView

none

none

Causes the Node to scroll into view, aligning the Node to the bottom of the TreeView area. This function repositions the TreeView's scrollbars, not the scrollbars for the page itself.

CopyJavaScript
 function ScrollNode()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("My Node");
   if(node)
   {
       node.scrollIntoView();
   }
}
 

get_imageElement

none

DOM Element

Gets the DOM Element of the image set to the node. Note: Images are set using the RadTreeView ImageUrl property.

CopyJavaScript
function GetImageElement()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");       
   var node = tree.get_selectedNode();
   if(node)
   {
       alert(node.get_imageElement().src);
   }
}
 

get_textElement

none

DOM Element

Gets the DOM Element of the text set to the Node. Note: Changes to the text element are not persisted across postbacks.

CopyJavaScript
     
function GetTextElement()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");       
   var node = tree.get_selectedNode();
   if(node)
   {
       alert(node.get_textElement().innerHTML);
   }
}
 

get_text

none

string

Retrieves the text for a Node.

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

set_text

string

none

Sets the text of the Node.

get_value

none

string

Gets the value of the Node.

set_value

string

none

Sets the value of the Node.

CopyJavaScript
     
function GetValue()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");       
   var node = tree.get_selectedNode();
   if(node)
   {
       alert(node.get_value());
   }
}
 

get_category

none

string

Gets the category of the Node.

set_category

string

none

Sets the category of the Node.

CopyJavaScript
     
function GetCategory()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");       
   var node = tree.get_selectedNode();
   if(node)
   {
       alert(node.get_category());
   }
}
 

get_isEnabled

none

bool

Returns true if both the Node and the tree are enabled. If one of them is disabled, the get_isEnabled returns false.

get_enabled

none

bool

Gets the enabled state of the Node. The Node is enabled if get_enabled() returns true.

CopyJavaScript
     
function GetEnabled()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_enabled())    
       {       
           node.set_enabled(false);   
       }    
       else    
       {       
           node.set_enabled(true);      
       }          
   }
}
 

get_expanded

none

bool

Gets the expanded/collapsed state of a Node. The Node is expanded if get_expanded() returns true.

CopyJavaScript
     
function GetExpanded()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_expanded())    
       {       
           node.set_expanded(false);    
       }    
       else    
       {       
           node.set_expanded(true);     
       }          
   }
}
 

get_checked

none

bool

Gets the checked state of a Node. The Node is checked if get_checked() returns true.

CopyJavaScript
     
function GetChecked()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_checked())    
       {       
           node.set_checked(false);          
       }    
       else    
       {       
           node.set_checked(true);
       }          
   }
}
 

get_selected

none

bool

Gets the selected state of a Node. Returns true if the Node is selected.

CopyJavaScript
     
function GetSelected()
{
   var tree = $find("<%= RadTreeView1.ClientID %>");
   var node = tree.findNodeByText("Root Node 1");
   if(node)
   {
       if(node.get_selected())    
       {       
           node.set_selected(false);    
       }    
       else    
       {       
           node.set_selected(true);     
       }          
   }
}
 

get_nodes

none

Telerik.Web.UI.RadTreeNodeCollection

Returns the RadTreeNodeCollection of a Node.

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

get_allNodes

none

array of RadTreeNode objects

Returns all child nodes of a Node.

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

get_parent

none

RadTreeNode/RadTreeView

Gets an instance of the parent-Node or the RadTreeView object if the Node is a root Node.

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

get_treeView

none

RadTreeView

Gets an instance to the parent RadTreeView. The example below retrieves the TreeView and calls various methods from the TreeView.

CopyJavaScript
function GetTreeView(node) {
    if (node) {
        var tree = node.get_treeView();
        var nodeText = node.get_text();

        tree.trackChanges();
        // remove duplicates of node
        var foundNode = tree.findNodeByText(nodeText);
        while (foundNode) {
            tree.get_nodes().remove(foundNode)
            foundNode = tree.findNodeByText(nodeText);
        }

        // add selected node back in
        tree.get_nodes().add(node);

        tree.commitChanges();
    }
}
 

get_element

none

DOM Element

Returns the DOM element for a Node.

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

get_contextMenu

none

RadMenu

Returns the context menu object (if any).

CopyJavaScript
function GetContextMenu() {
    var tree = $find("<%= RadTreeView1.ClientID %>");
    var node = tree.get_selectedNode();
    if (node) {
        var menu = node.get_contextMenu();
        if (menu)
            menu.hide();
    }
}
 

get_navigateUrl

none

String

Returns the URL of the Node(the href attribute of the link). Null if the NavigateUrl server property is not set.

set_navigateUrl

String

none

Sets the URL of the Node. Works only if the NavigateUrl property has been set at the server-side beforehand or if the Node is not added at the client-side.

CopyJavaScript
function setNavigateUrlToTheSelectedNode() {
    var tree = $find("<%= RadTreeView1.ClientID %>");
    var node = tree.get_selectedNode();
    if (node) {
        node.set_navigateUrl("http://www.example.com");
    }
}
 

get_attributes

none

Collection

Returns a Collection of all custom attributes set to the Node.

CopyJavaScript
function getCustomAttributes() {
    var tree = $find("<%= RadTreeView1.ClientID %>");
    var node = tree.get_selectedNode();
    if (node) {
        var attributes = node.get_attributes();
        attributes.setAttribute("AttributeName", AttributeValue);
        var attribute1 = attributes.getAttribute("AttributeName");

    }
}
 

set_target

String

none

Sets the target of the Node.

get_target

none

String

Gets the target of the Node. If a target is not set, returns null.

set_toolTip

String

none

Sets the ToolTip of the Node.

get_toolTip

none

String

Gets the ToolTip of the Node. If a ToolTip is not set, returns null.

get_level

none

Integer

Gets the Level of the Node in the TreeView structure. Root Nodes are at level 0, their children Nodes - at 1 and so on.

set_checkable

Boolean

none

Enables/Disables the checkability of the Node.

get_imageUrl

none

String

Returns the path to the image displayed next to the Node.

set_imageUrl

String

none

Sets the path to the image displayed next to the Node.

get_disabledImageUrl

none

String

Returns the path to the image displayed next to the Node when disabled.

set_disabledImageUrl

String

none

Sets the path to the image displayed next to the Node when disabled.

get_expandedImageUrl

none

String

Returns the path to the image displayed next to the Node when expanded.

set_expandedImageUrl

String

none

Sets the path to the image displayed next to the Node when expanded.

get_selectedImageUrl

none

String

Returns the path to the image displayed next to the Node when selected.

set_selectedImageUrl

String

none

Sets the path to the image displayed next to the Node when selected.

get_hoveredImageUrl

none

String

Returns the path to the image displayed next to the Node when hovered.

set_hoveredImageUrl

String

none

Sets the path to the image displayed next to the Node when hovered.

get_cssClass

none

String

Returns the name of the CSS class applied to the Node.

set_cssClass

String

none

Sets the name of the CSS class to be applied to the Node.

get_disabledCssClass

none

String

Returns the name of the CSS class applied to the Node when disabled.

set_disabledCssClass

String

none

Sets the name of the CSS class to be applied to the Node when disabled.

get_hoveredCssClass

none

String

Returns the name of the CSS class applied to the Node when hovered.

set_hoveredCssClass

String

none

Sets the name of the CSS class to be applied to the Node when hovered.

get_childListElement

none

HTML Element

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

get_contextMenuID

none

String

Returns the ID of the Context Menu assigned to the Node.

set_contextMenuID

String

none

Sets the ID of the Context menu to be assigned to the Node.

get_toggleElement

none

HTML Element

Returns the HTML element representing the toggle image. Null, if the Node has no child Nodes.

get_enableContextMenu

none

Boolean

True if the Context Menus are enabled, False otherwise.

showLoadingStatus

statusText, position

none

Shows the loading message at the specified position. The available positions are: Telerik.Web.UI.TreeViewLoadingStatusPosition.BelowNodeText Telerik.Web.UI.TreeViewLoadingStatusPosition.AfterNodeText Telerik.Web.UI.TreeViewLoadingStatusPosition.BeforeNodeText

CopyJavaScript
     

node.showLoadingStatus("Loading…", Telerik.Web.UI.TreeViewLoadingStatusPosition.BelowNodeText);
 

hideLoadingStatus

none

none

Hides the loading message.

get_postBack

none

Boolean

True if postback is enabled, false otherwise.

set_postBack

Boolean

none

Determines if the Node should postback.

get_expandMode

none

Int

Returns the ExpandMode of the Node.ExpandMode can be:0 - ExpandMode.ClientSide;1 - ExpandMode.ServerSide;2 - ExpandMode.ServerSideCallBack;3 - ExpandMode.WebService;

set_expandMode

ExpandMode

none

Sets the ExpandMode of the Node.ExpandMode can be:Telerik.Web.UI.TreeNodeExpandMode.ClientSide;Telerik.Web.UI.TreeNodeExpandMode.ServerSide;Telerik.Web.UI.TreeNodeExpandMode.ServerSideCallBack;Telerik.Web.UI.TreeNodeExpandMode.WebService;

get_visible

none

Boolean

True if the item is visible.

set_visible

Boolean

none

Sets the visibility of the item.

CopyJavaScript
     

node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.WebService);
 

get_allowEdit

none

Boolean

True, if Node edit is allowed, false, otherwise.

set_allowEdit

Boolean

none

Allows/Disallows Node editing.

get_allowDrag

none

Boolean

True, if dragging is allowed, false otherwise.

set_allowDrag

Boolean

none

Enables/Disables dragging.

get_allowDrop

none

Boolean

True, if dropping is allowed, false otherwise.

set_allowDrop

Boolean

none

Enables/Disables dragging.

get_index

none

int

Returns the index of the node in the nodes collection of its parent.

See Also