Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

TreeView / Client-side events

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

  • 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);
      	}
      

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.Web.Examples.TreeView.ClientEvents.DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag runat="server" ID="Headtag2"></qsf:HeadTag>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body class="BODY">

        <script type="text/javascript">
                
                function onLoad(sender, args)
                {
                    logEvent("OnClientLoad");
                }
                
                function onNodeClicking(sender, args)
                {
                     logEvent("OnClientNodeClicking: " + args.get_node().get_text());
                }
            
             function onNodeChecking(sender, args)
                {
                    logEvent("OnClientNodeChecking: " + args.get_node().get_text());
                }
                    
                function onMouseOver(sender, args)
                {
                     logEvent("OnClientMouseOver: " + args.get_node().get_text());
                }
                
                function onMouseOut(sender, args)
                {
                     logEvent("OnClientMouseOut: " + args.get_node().get_text());
                }
                
                function onEditStart(sender, args)
                {
                 logEvent("OnClientNodeEditStart: " + args.get_node().get_text());
                }
                
                function onEditing(sender, args)
                {
                     logEvent("OnClientNodeEditing: " + args.get_node().get_text() + " " +
                     args.get_newText());
                }
                
                function onEdited(sender, args)
                {
                     logEvent("OnClientNodeEdited: " + args.get_node().get_text());
                }            
                
                function onNodeDragStart(sender, args)
                {
                     logEvent("OnClientNodeDragStart: " + args.get_node().get_text());
                }
                
                function onNodeExpanded(sender, args)
                {
                    logEvent("OnClientNodeExpanded: " + args.get_node().get_text());
                }
                
                function onNodeCollapsed(sender, args)
                {
                    logEvent("OnClientNodeCollapsed: " + args.get_node().get_text());
                }

                function onNodeDropping(sender, args)
                {
                    var sourceNode = args.get_sourceNode();
                    var destNode = args.get_destNode();
                    
                    if (destNode)
                    {
                        logEvent("OnClientNodeDropping:" + sourceNode.get_text()+ " onto " + destNode.get_text() + ".");
                    }
                }
                
                function onNodeAnimationEnd(sender, args)
                {
                 logEvent("OnClientNodeAnimationEnd: " + args.get_node().get_text() + " finished " + (args.get_expanding() ? "expanding." : "collapsing.") );
                }
                
        </script>

        <form id="mainForm" method="post" runat="server">
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#"></qsf:Header>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
                <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Logged events">
                    <ul style="margin-left: 0; border-left: none">
                        <li>
    <asp:CheckBox ID="OnClientLoad" runat="server" Text="OnClientLoad" AutoPostBack="True"
    Checked="True" OnCheckedChanged="OnClientLoad_CheckedChanged" /></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" /></li>

                    </ul>
                    <ul>
                        <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>
                    <ul>
                        <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:ConfiguratorPanel>
                <telerik:RadTreeView 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%" Height="250px" Style="border: 1px solid #CBE7F5;">
                    <Nodes>
                        <telerik:RadTreeNode Text="Personal Folders" Expanded="True">
                            <Nodes>
                                <telerik:RadTreeNode Text="Deleted Items (6)" />
                                <telerik:RadTreeNode Text="Drafts" />
                                <telerik:RadTreeNode Text="Inbox (14)" Expanded="True">
                                    <Nodes>
                                        <telerik:RadTreeNode Text="Invoices" />
                                    </Nodes>
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Junk E-mail" />
                                <telerik:RadTreeNode Text="Outbox" />
                                <telerik:RadTreeNode Text="Sent Items" />
                                <telerik:RadTreeNode Text="Search Folders">
                                    <Nodes>
                                        <telerik:RadTreeNode Text="Form Follow Up" />
                                        <telerik:RadTreeNode Text="Large Mail" />
                                        <telerik:RadTreeNode Text="Unread Mail" />
                                    </Nodes>
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>
                <qsf:EventLogConsole runat="server" ID="EventLogConsole1" />
            </telerik:RadAjaxPanel>
            <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451