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

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
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.GridExamplesVBNET.Client.ClientSideEvents.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ 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>
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadTreeList1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="log"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <!--[if lte IE 6]> <div style="width:740px;overflow:auto"> <![endif]-->
    <div class="demo-container no-bg size-wide">
        <telerik:RadTreeList RenderMode="Lightweight" 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>
                <telerik:TreeListBoundColumn DataField="Name" HeaderText="Sport" UniqueName="Name"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Country" HeaderText="Country" UniqueName="Country"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="City" HeaderText="City" UniqueName="City"></telerik:TreeListBoundColumn>
            </Columns>
            <ClientSettings>
                <ClientEvents OnItemClick="OnItemClick" OnItemCreated="OnItemCreated" OnItemDblClick="OnItemDblClick" OnItemDeselected="OnItemDeselected" OnItemSelected="OnItemSelected" OnTreeListCreated="OnTreeListCreated"></ClientEvents>
                <Selecting AllowItemSelection="true"></Selecting>
            </ClientSettings>
        </telerik:RadTreeList>
        <br />
        <qsf:EventLogConsole runat="server" ID="EventLogConsole1"></qsf:EventLogConsole>
    </div>
    <!--[if lte IE 6]> </div> <![endif]-->
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance