RadTreeView for ASP.NET
Table of Contents
  • At a glance
  • Licensing
  • Installation and deployment
  • DNN
  • New to Telerik RadTreeView?
  • Already using the control
  • Standards Compliance
  • AJAX Support
  • Feature OverView
  • How RadTreeView compares to ASP.NET Treeview
  • Getting Started
  • ASP.NET 2.0 Features
  • Templates
  • Defining TreeView Structure
  • Data Binding
  • Controlling the visual appearance
  • Context Menus
  • Custom Attributes
  • Using Checkboxes
  • Using the Drag and Drop Functionality
  • Load On Demand Support
  • Example scenarios (How to)
  • Telerik RadTreeView Client-Side
  • Telerik RadTreeView Server-Side
  • Interoperability with Other Controls
  • TroubleShooting
  • API Reference
  • Get more help
Client-Side JavaScript Events Send comments on this topic.
See Also

Glossary Item Box

Telerik RadTreeView provides a rich client-side API and event model. You can wire custom client-script code (JavaScript) to a number of client-side events fired by the treeview. All client-side events are exposed as string properties to the Telerik RadTreeView instance - the value is the name of the JavaScript function to be called. Following is a list of all events that are currently supported by Telerik RadTreeView:

Event

Description

BeforeClientClick

BeforeClientClick is fired prior to node clicking - when end users use the mouse to click or use keyboard to navigate to a certain node. The event is called just prior to node action - postback or URL redirection. The BeforeClientClick event takes two parameters:

  • the node that is about to be clicked
  • event arguments

 

This event can be cancelled - simply return false from the event.

The example below shows how to cancel the event so that the node cannot be selected when the Ctrl key is pressed.

...
<script>
function BeforeClientClickHanlder(node, eventArgs)
{              
    //check whether the Ctrl key has been pressed and return false so that the node cannot be selected
    if(eventArgs.ctrlKey)
    {
        return false;
    }
}
</script>
...
<rad:RadTreeView
    ID="RadTreeView1"
    runat="server"      
    BeforeClientClick="BeforeClientClickHanlder".../>
...

AfterClientClick

AfterClientClick is fired after a node has been clicked - when end users use the mouse or the keyboard to click a certain node. The event is also called just prior to node action - postback or URL redirection.

This event can be cancelled - simply return false from the event.

 ...
<script language="javascript">
  function AfterClickHandler(node)
  {
    alert(node.Text);
  }
</script>
...
<rad:RadTreeView
 ID="RadTree1"
runat="server"
 AfterClientClick="AfterClickHandler"
</rad:RadTreeView>
...

BeforeClientDoubleClick

BeforeClientDoubleClick is fired upon double-clicking on a node - when end users use the mouse to click a certain node twice.

This event can be cancelled - simply return false from the event.

 ...
<script language="javascript" type="text/javascript">
        function BeforeClientDoubleClickHandler(node)
        {
            alert(node.Text);
        }
</script>
...
<rad:RadTreeView
   ID="RadTreeView1"
   runat="server"
   BeforeClientDoubleClick="BeforeClientDoubleClickHandler">
</rad:RadTreeView>   
...

BeforeClientCheck

BeforeClientCheck event is fired prior to checking a checkbox in Telerik RadTreeView. You must have set the CheckBoxes property of the treeview to true, so that checkboxes are displayed next to each node. The event used to receive only a single parameter, the node being checked. Now changed to accept a second parameter, the browser event arguments - sometimes needed to get keyboard / mouse data in addition to the node checked, for example if Ctrl has been pressed while checking the node.

This event can be cancelled - simply make sure you return false from the function in case you want to cancel the action.
You can return true (or not) and the checkbox will be checked as normal. (More on checkboxes)

...
<script language="javascript">
  function BeforeCheckHandler(node, browserEvents)
  {
    alert( "You are going to check " +
            node.Text +
            " which is currently still "+
            node.Checked);
    if (node.Category == "NonCheckable")
    {
        return false;
    }
  }
</script>
...
<rad:RadTreeView
 ID="RadTree1"
 runat="server"
 CheckBoxes="True"
 BeforeClientCheck="BeforeCheckHandler"
</rad:RadTreeView>
...

AfterClientCheck

AfterClientCheck is fired immediately after BeforeClientCheck, where the only difference being that the node check status (node.Checked) has now changed to reflect the new value and the action cannot be cancelled anymore.

...
 <script language="javascript">
  function AfterCheckHandler(node)
  {
    alert("You have checked " + node.Text + " which is now " + node.Checked);
  }
</script>
...
<rad:RadTreeView
 ID="RadTree1"
runat="server"
 CheckBoxes="True"
 AfterClientCheck="AfterCheckHandler"
</rad:RadTreeView>
...

AfterClientFocus

AfterClientFocus is fired when the treeview instance is focused. You can focus the treeview by either clicking in the treeview area (defined by its position and Width / Height properties) or by focusing using the keyboard. For keyboard focusing you need to set the TabIndex and / or AccessKey properties of Telerik RadTreeView so that the treeview gets the focus when the user tabs to the treeview or presses its AccessKey. The function receives a single parameter - the instance of the treeview that has received the focus.

<script language="javascript">
  function AfterClientFocus(treeView)
  {
    alert(treeView.ID + " has just received the focus");
  }
</script>
...
<rad:RadTreeView
 ID="RadTree1"
runat="server"
 AfterClientFocus="AfterClientFocus"
</rad:RadTreeView>

AfterClientEdit

AfterClientEdit is fired after a TreeNode has been edited. This event accepts three parameters - node, oldText, newText. You can edit a tree node by selecting a node and press F2 (or click an already selected node) and you'll be able to edit the node's text on the client-side.

Client-Side node edit

In order to do that, you need to set the AllowNodeEditing property of Telerik RadTreeView to true.

<script language="javascript" type="text/javascript">
        function AfterClientEdit(node, oldText, newText)
        {
            alert(node.Text + "has been edited.");
            alert("You have changed " + oldText + " to " + newText);
        }
</script>

<rad:RadTreeView
ID="RadTree1"
runat="server"
Height="300px"
AllowNodeEditing="True"
AfterClientEdit="AfterClientEdit"/>

This event can be cancelled - simply return false from the event.


See also Client-Side Node Editing

AfterClientMouseOut

AfterClientMouseOut is fired when "mousing out" from a tree node. The event takes the node as a parameter.

<script language="javascript" type="text/javascript">
        function AfterClientMouseOut(node)
        {
            alert(node.Text);
        }
    </script>
   
    <rad:RadTreeView
        ID="RadTreeView1"
        runat="server"
        AfterClientMouseOut="AfterClientMouseOut"/>

This event can be cancelled - simply return false from the event.

BeforeClientToggle

BeforeClientToggle is fired after the +/- icon (next to the node) has been clicked and prior to expanding/collapsing of a tree node. The event takes the node as a parameter.

<script language="javascript" type="text/javascript">
        function BeforeClientToggle(node)
        {
            alert(node.Text);
        }
    </script>
   
    <rad:RadTreeView
        ID="RadTreeView1"
        runat="server"
        BeforeClientToggle="BeforeClientToggle"/>

This event can be cancelled - simply return false from the event.

AfterClientToggle

AfterClientToggle is fired after the +/- icon (next to the node) has been clicked and before to expanding/collapsing of a tree node finishes. The event takes the node as a parameter.

<script language="javascript" type="text/javascript">
        function AfterClientToggle(node)
        {
            alert(node.Text);
        }
    </script>
   
    <rad:RadTreeView
        ID="RadTreeView1"
        runat="server"
        AfterClientToggle="AfterClientToggle"/>

This event can be cancelled - simply return false from the event.

BeforeClientHighlight

BeforeClientHighlight is called when the user hovers a node with the mouse.

The action can be cancelled - simply return false from the event handler and the node will not be highlighted.
This event is not fired when using keyboard navigation.
<script language="javascript">
  function BeforeHighlightHandler(node)
  {
    alert("You've just highlighted node " + node.Text);
  }
</script>
...
<rad:RadTreeView
 ID="RadTree1"
runat="server"
 BeforeClientHighlight= "BeforeHighlightHandler"
</rad:RadTreeView>
...

AfterClientHighlight

AfterClientHighlight fires immediately after BeforeClientHighlight.

If you are using the keyboard for navigation, only AfterClientHighlight fires.

<script language="javascript">
  function AfterHighlightHandler(node)
  {
    alert("You've just ended highlight for node " + node.Text);
  }
</script>

...
<rad:RadTreeView
 ID="RadTree1"
runat="server"
 AfterClientHighlight= "AfterHighlightHandler"
</rad:RadTreeView>
...

AfterClientDrop

AfterClientDrop fires immediately after a tree node has been dropped.

<script language="javascript">
  function AfterClientDrop(node)
  {
    alert("You've just dropped " + node.Text + " node");
  }
</script>

...
<rad:RadTreeView
 ID="RadTree1"
runat="server"
 AfterClientDrop= "AfterClientDrop"
</rad:RadTreeView>
...

AfterClientCallBackError

AfterClientCallBackError fires immediately after an error occurres due to adding nodes via callback (ExpandMode.ServerSideCallBack). Thus you can handle the error on the client side and show an alert.

<script language="javascript">
  function AfterClientCallBackError(node)
  {
    alert("The error occured when you tried to expand the " + node.Text + " node");
  }
</script>

...
<rad:RadTreeView
 ID="RadTree1"
runat="server"
 AfterClientCallBackError= "AfterClientCallBackError"
</rad:RadTreeView>
...

BeforeClientToggle

BeforeClientToggle is called just prior to node toggling (expand / collase) - when end users click the + / - images next to the node or use the keyboard (left / right arrows or + / -) to expand / collapse a node. This function receives a single parameter - the instance of the node toggled.

The event can be cancelled - simply return false from the event handler.

<script language="javascript">
  function BeforeToggleHandler(node)
  {
    alert("You've just Toggled node " + node.Text);
  }
</script>
...
<rad:RadTreeView
 ID="RadTree1"
runat="server"
 BeforeClientToggle="BeforeToggleHandler"
</rad:RadTreeView>
...

AfterClientToggle

AfterClientToggle is called immediately after the node toggling event. This function receives a single parameter - the instance of the node toggled.

<script language="javascript">
  function AfterToggleHandler(node)
  {
    alert("You've just ended Toggle for node " + node.Text);
  }
</script>
...
<rad:RadTreeView
 ID="RadTree1"
runat="server"
 AfterClientToggle="AfterToggleHandler"
</rad:RadTreeView>
...

BeforeClientContextClick

BeforeClientContextClick is called when the user clicks on a context menu item. The event receives three parameters:

  • the instance of the node
  • the text of the context menu item that is selected
  • the ID of the ContextMenuItem
The event can be cancelled - simply return false from the event handler and the postback server-side event will not be fired.
<script language="javascript">
  function BeforeClientContextHandler(node, itemText, itemID)
  {
    alert( "Selected node is " + node.Text + " and context menu item selected " + itemText + itemID);
  }
</script>
...
<rad:RadTreeView
 ID="RadTree1"
 runat="server"
 BeforeClientContextClick= "BeforeClientContextHandler"
</rad:RadTreeView>
...

BeforeClientDrag

BeforeClientDrop

AfterClientMove

All these three events are related to client-side drag & drop control.

BeforeClientDrag accepts a single parameter - the instance of the node being dragged. Alternatively you can achieve the same functionality by setting the DragEnabled property of the node to false.

The event can be cancelled - simply return false from the event handler and node dragging will be cancelled.

BeforeClientDrop accepts three parameters sourceNode, destNode, events. 

  • The first parameter (sourceNode) is the instance of the node being dragged. It is always set to an instance of a node and cannot be null.
  • The second parameter (destNode) is set to the instance of the node the source node is being dropped to. It can be null, since you can also drop a node to an Html element, not necessarily to a TreeNode.
  • The third parameter (events) is set to the instance of the current browser events and can be used to detect the Html Element  which the user is dropping the node to. Basically, the element is detected by using the events.srcElement (for Internet Explorer) and events.target (for Netscape) based browser property - it is set to the currently active Html Element (the element where the mouse cursor is). However, it is possible that events.srcElement is set to a child of the element in question, so you should also scan parent nodes.
  • The fourth parameter (dropPosition) determines where the nodes should be dropped. The dropPosition can be one "over", "below" or "above".

AfterClientMove is executed each time the user moves the mouse while dragging the node. This comes handy if you want to change the mouse cursor so that end-users know where they can actually drag the node - only over a grid, editor, another treeview, etc. The event handler receives a single parameter - the client-side events instance.

BeforeClientContextMenu

BeforeClientContextMenu is called just prior to opening Telerik RadTreeView's context menu. This function receives two parameters - the instance of the current node and the event object of the browser.
 
The event can be cancelled - simply return false from the event handler.
 
You can also use this event to suppress the default built-in context menus in Telerik RadTreeView and use Telerik RadMenu instead.

<script language="javascript">
function ShowRadMenu(node, e)
        {
             if (node.Category == "Folder")
            {
                RadMenu1.OnContext(e, node.TextElement());
            }
             else
            {
                RadMenu2.OnContext(e, node.TextElement());
            }
             return false;
        }
</script>
...
<rad:RadTreeView
 ID="RadTree1"
 runat="server"
 BeforeClientContextMenu= "ShowRadMenu"
</rad:RadTreeView>
... 

One valuable feature for most of the client-side events is that you can cancel subsequent actions (Postback or NavigateUrl redirection) upon certain client-side condition. For example, if you have set your treeview with AutoPostBack="True" , all nodes will cause postback when clicked. However, by returning false from an event (i.e. BeforeClientClick), you can disable the action, i.e:
function BeforeClientClick(Node)
{
  if (Node.Category != "Product")
  {
    alert("Please, select a Product!");
    return false;
  }
return true;
} 

See Also