RadTreeView for ASP.NET AJAX

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.

CopyASPX

     

<script type="text/javascript" language="javascript">
    function ClientNodeClicked(sender, eventArgs) 
    {
        var node = eventArgs.get_node();
        alert("You clicked " + node.get_text());

    }

</script>

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

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

CopyJavaScript

<script language="javascript" type="text/javascript">
function AssignEventHandler()
{
      var tree = $find("<%= RadTreeView1.ClientID %>");
      tree.add_nodeClicked(ClientNodeClicked);
}   
</script>         

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

CopyJavaScript

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.