Events Overview

RadTreeView supports a number of client-side events that let you customize behavior:

• OnClientContextMenuItemClicked: occurs when the user clicks a context menu item for a node.

• OnClientContextMenuItemClicking: occurs when the user clicks a context menu item for a node but before the OnClientContextMenuItemClicked event.

• OnClientContextMenuShowing: occurs just before the context menu is displayed.

• OnClientContextMenuShown: occurs when the context menu is displayed.

• OnClientDoubleClick: occurs when a node is double-clicked with the mouse.

• OnClientKeyPressing: occurs when any key is pressed while the TreeView is having the focus.

• OnClientMouseOut: occurs when the mouse leaves the area of a node.

• OnClientMouseOver: occurs as the mouse passes over a node.

• OnClientNodeChecked: occurs after a node checkbox value is toggled.

• OnClientNodeChecking: occurs when just before the checkbox value is toggled.

• OnClientNodeClicked: occurs when a node is navigated to by the mouse or keyboard.

• OnClientNodeClicking: occurs when a node is navigated to by the mouse or keyboard and before the OnClientNodeClicked event.

• OnClientNodeCollapsed: occurs when a parent node collapses to hide its child nodes.

• OnClientNodeCollapsing: occurs just before a parent node collapses to hide its child nodes.

• OnClientNodeDataBound: occurs when a Node is being created during Web Service Load on Demand.

• OnClientTemplateDataBound: occurs after the client template is being bound against the DataItem.

• OnClientNodeDragging: occurs while a node is being dragged.

• OnClientNodeDragStart: occurs as the drag operation begins.

• OnClientNodeDropped: occurs when a node is dropped on another node, between nodes or on an HTML element.

• OnClientNodeDropping: occurs just before a node is dropped.

• OnClientNodeEditStart: occurs as the edit begins.

• OnClientNodeEdited: occurs when a node has been edited by the end user.

• OnClientNodeEditing: occurs after the user has finished editing but before the OnClientNodeEdited event.

• OnClientNodeExpanded: occurs after a parent node has expanded to display its child nodes.

• OnClientNodeExpanding: occurs just before a parent node expands to display its child nodes.

• OnClientNodePopulated: occurs when a load-on-demand operation has populated the child nodes of a parent node.

• OnClientNodePopulating: occurs just before a load-on-demand operation has populated the child nodes of a parent node.

• OnClientNodePopulationFailed: occurs when an error occurs on the server in a load-on-demand operation.

• OnClientLoad: occurs after the RadTreeView client-side object has been fully initialized.

• OnClientNodeAnimationEnd: occurs when the node is expanded / collapsed and after the animation has finished

To use these events, write a javascript function that can be called when an event occurs. Then assign the name of the JavaScript function as the value of the corresponding RadTreeView event property.

<telerik:RadTreeView RenderMode="Lightweight" 
    ID="RadTreeView1" 
    runat="server"  
    OnClientNodeClicked="ClientNodeClicked">
</telerik:RadTreeView>

function ClientNodeClicked(sender, eventArgs) 
{
    var node = eventArgs.get_node();
    alert("You clicked " + node.get_text());
}

You can also assign event handlers in client-side code:

function AssignEventHandler()
{
    var tree = $find("<%= RadTreeView1.ClientID %>");
    tree.add_nodeClicked(ClientNodeClicked);
}   

Another advantage of the client-side API is that you can detach an event handler dynamically:

function removeOnClicked2()
{
    var tree = $find("<%= RadTreeView1.ClientID %>");
    tree.remove_nodeClicked(ClientNodeClicked);
}   

For a live example of using client-side events, see Client-Side Events Demo.