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

Client-side events

  • Personal Folders
    • Deleted Items (6)
    • Drafts
    • Inbox (14)
      • Invoices
    • Junk E-mail
    • Outbox
    • Sent Items
    • Search Folders
Event log
  • Demo Configurator

RadTreeView  provides a number of client-side events that would allow you to accomplish even the most complicated tasks.

You can attach to the RadTreeView's events by using either the server-side properties or the client-side API.

  1. Attaching event handlers via a server-side property
    Each client-side event has a corresponding property, whose name is formed like OnClient[EventName].
    You can set the property to the name of the function to be called when the event occurs. 
    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientNodeClicking="onNodeClicking" />

<script type="text/javascript">
	function onNodeClicking(sender, args)
	{
		 logEvent("OnClientNodeClicking: " + args.get_node().get_text());
	}
</script>
  2. Using the client-side API to attach event handlers
    Using the client-side API of RadTreeView allows you to attach multiple event handlers to one event using the standard MS AJAX conventions. 
    <script type="text/javascript">
	function onClickedHandler1()
	{
		alert("First handler called");
	}
	function onClickedHandler2()
	{
		alert("Second handler called");
	}

	function pageLoad()
	{
		var treeView = $find("<%=RadTreeView1.ClientID%>");
		
		treeView.add_nodeClicking(onClickedHandler1);
		treeView.add_nodeClicking(onClickedHandler2);
	}
</script>
    Another advantage of the client-side API is the possiblity of dynamically detaching certain handlers. You can use the remove_nodeClicking method of the treeview object. 

    <script type="text/javascript">
	$find(<%=RadTreeView1.ClientID%>).remove_nodeClicking(onClickedHandler1);
</script>
  3. Cancelling an event
    The events, whose names end in ing, can be cancelled. You can cancel the event by using the set_cancel method of the event arguments passed to the handler. 
    <script type="text/javascript">
	function onClientNodeClicking(sender, eventArgs)
	{
	    eventArgs.set_cancel(true);
	}
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • Scripts.js
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="TreeView.Examples.Programming.ClientEvents.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script src="scripts.js" type="text/javascript"></script>
    <div class="demo-container size-thin">
        <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server" CheckBoxes="True" AllowNodeEditing="True" 
            EnableDragAndDrop="true" OnClientNodeClicking="onNodeClicking" OnClientNodeChecking="onNodeChecking"
            OnClientMouseOver="onMouseOver" OnClientMouseOut="onMouseOut" OnClientNodeEditStart="onEditStart"
            OnClientNodeEditing="onEditing" OnClientNodeEdited="onEdited" OnClientNodeDragStart="onNodeDragStart"
            OnClientNodeDropping="onNodeDropping" OnClientNodeExpanded="onNodeExpanded" OnClientNodeCollapsed="onNodeCollapsed"
            OnClientNodeAnimationEnd="onNodeAnimationEnd" OnClientLoad="onLoad" Width="100%">
            <Nodes>
                <telerik:RadTreeNode Text="Personal Folders" Expanded="True">
                    <Nodes>
                        <telerik:RadTreeNode Text="Deleted Items (6)">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Drafts">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Inbox (14)" Expanded="True">
                            <Nodes>
                                <telerik:RadTreeNode Text="Invoices">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Junk E-mail">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Outbox">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Sent Items">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Search Folders">
                            <Nodes>
                                <telerik:RadTreeNode Text="Form Follow Up">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Large Mail">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Unread Mail">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
    <qsf:EventLogConsole runat="server" ID="EventLogConsole1" AllowClear="true"></qsf:EventLogConsole>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="OnClientLoad" runat="server" Text="OnClientLoad" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientLoad_CheckedChanged"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="OnClientMouseOut" runat="server" Text="OnClientMouseOut" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientMouseOut_CheckedChanged"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="OnClientMouseOver" runat="server" Text="OnClientMouseOver" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientMouseOver_CheckedChanged"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="OnClientNodeClicking" runat="server" Text="OnClientNodeClicking" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientNodeClicking_CheckedChanged"></asp:CheckBox></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="OnClientNodeChecking" runat="server" Text="OnClientNodeChecking" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientNodeChecking_CheckedChanged"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="OnClientNodeCollapsed" runat="server" Text="OnClientNodeCollapsed" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientNodeCollapsed_CheckedChanged"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="OnClientNodeDragStart" runat="server" Text="OnClientNodeDragStart" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientNodeDragStart_CheckedChanged"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="OnClientNodeDropping" runat="server" Text="OnClientNodeDropping" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientNodeDropping_CheckedChanged"></asp:CheckBox></li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="OnClientNodeEditStart" runat="server" Text="OnClientNodeEditStart" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientNodeEditStart_CheckedChanged"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox ID="OnClientNodeEditing" runat="server" Text="OnClientNodeEditing" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientNodeEditing_CheckedChanged"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="OnClientNodeEdited" runat="server" Text="OnClientNodeEdited" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientNodeEdited_CheckedChanged"></asp:CheckBox></li>
                        <li>
                            <asp:CheckBox ID="OnClientNodeExpanded" runat="server" Text="OnClientNodeExpanded" AutoPostBack="True" Checked="True" OnCheckedChanged="OnClientNodeExpanded_CheckedChanged"></asp:CheckBox></li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance