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

TreeList / Client Objects and Events

SportIDSportCountryCity
1WinterUSA 
2SummerUK 
Event log:

  • There are two possible means to reference the client RadTreeList object:
    1. Using the $find(id) method (shortcut for the findComponent() method) of the ASP.NET AJAX framework
    2. Subscribing to the OnTreeListCreated client event of the control. In its handler the first argument passed (sender) will reference the client RadTreeList object
    Telerik RadTreeList exposes a client side API with various client events which can be wired to execute custom client code and change the data presentation. In this example we demonstrate the usage of the following client-side events:
    • OnTreeListCreating
    • OnTreeListCreated
    • OnItemCreated
    • OnItemClick
    • OnItemDblClick
    • OnItemSelecting
    • OnItemSelected
    • OnItemDeselecting
    • OnItemDeselected
    • OnTreeListDestroying

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Client.ClientSideEvents.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="telerik" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ 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">
        <telerik:HeadTag runat="server" ID="Headtag1"></telerik:HeadTag>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">
                <!--

                function pageLoad()
                {
                    logEvent("pageLoad fired");
                }

                function OnTreeListCreated(sender, eventArgs)
                {
                    var treeList = $find("<%= RadTreeList1.ClientID %>");
                    var message = "ClientID of server-side RadTreeList object is: " + treeList.get_element().id;
                    logEvent(message);
                }

                function OnItemCreated(sender, eventArgs)
                {
                    var hierarchicalIndex = eventArgs.get_item().get_hierarchicalIndex();
                    var message = "OnItemCreated event is fired, the created item's LevelIndex is: " + hierarchicalIndex.LevelIndex +
                    ", NestedLevel is: " + hierarchicalIndex.NestedLevel;
                    logEvent(message);
                }

                function OnItemClick(sender, eventArgs)
                {
                    var item = eventArgs.get_item();
                    var message = "Item was clicked. DisplayIndex is: " + item.get_displayIndex();
                    logEvent(message);
                }

                function OnItemDblClick(sender, eventArgs)
                {
                    var item = eventArgs.get_item();
                    var message = "Item was double clicked. DisplayIndex is: " + item.get_displayIndex();
                    logEvent(message);
                }

                function OnItemSelected(sender, eventArgs)
                {
                    var hierarchicalIndex = eventArgs.get_item().get_hierarchicalIndex();
                    var message = "Item with LevelIndex: " + hierarchicalIndex.LevelIndex + " and NestedLevel: " +
                     hierarchicalIndex.NestedLevel + " was selected";
                    logEvent(message);
                }

                function OnItemDeselected(sender, eventArgs)
                {
                    var hierarchicalIndex = eventArgs.get_item().get_hierarchicalIndex();
                    var message = "Item with LevelIndex: " + hierarchicalIndex.LevelIndex + " and NestedLevel: " +
                      hierarchicalIndex.NestedLevel + " was deselected";
                    logEvent(message);
                }
                -->
            </script>
        </telerik:RadCodeBlock>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <telerik:Header runat="server" ID="Header1" NavigationLanguage="CS"></telerik:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <!-- content start -->
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTreeList1" />
                        <telerik:AjaxUpdatedControl ControlID="log" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <!--[if lte IE 6]> <div style="width:740px;overflow:auto"> <![endif]-->
        <telerik:RadTreeList ID="RadTreeList1" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource"
            DataKeyNames="ID" ParentDataKeyNames="TypeID" AutoGenerateColumns="false" AllowMultiItemSelection="true">
            <Columns>
                <telerik:TreeListSelectColumn HeaderStyle-Width="38px">
                </telerik:TreeListSelectColumn>
                <telerik:TreeListBoundColumn DataField="ID" HeaderText="SportID" UniqueName="ID"
                    HeaderStyle-Width="80px" />
                <telerik:TreeListBoundColumn DataField="Name" HeaderText="Sport" UniqueName="Name" />
                <telerik:TreeListBoundColumn DataField="Country" HeaderText="Country" UniqueName="Country" />
                <telerik:TreeListBoundColumn DataField="City" HeaderText="City" UniqueName="City" />
            </Columns>
            <ClientSettings>
                <ClientEvents OnItemClick="OnItemClick" OnItemCreated="OnItemCreated" OnItemDblClick="OnItemDblClick"
                    OnItemDeselected="OnItemDeselected" OnItemSelected="OnItemSelected" OnTreeListCreated="OnTreeListCreated" />
                <Selecting AllowItemSelection="true" />
            </ClientSettings>
        </telerik:RadTreeList>
        <qsf:EventLogConsole runat="server" Style="height: 200px;" ID="EventLogConsole1" />
        <!--[if lte IE 6]> </div> <![endif]-->
        <!-- content end -->
        <telerik:Footer runat="server" ID="Footer1"></telerik: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