Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
The purpose of this example is to demonstrate the server-side selection capabilities of the RadTreeList control. The server-sede selection could be achieved by using the build in TreeListSelectColumn: <Columns> <telerik:TreeListSelectColumn></telerik:TreeListSelectColumn> </Columns> The alternative way is to fire the Select / Deselect commands as shown in the second (Single row selection) demo. Additionally, using the demo Configurator for the first RadTreeList control, you can see how the recursive selection works. Note that when recursive selection is enabled, the RadTreeList items are selected server-side (with postback) and multi-row selection is enabled implicitly.
<%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.TreeListExamplesVBNET.Selecting.ServerSideSelection.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> <link href="styles.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <telerik:RadScriptManager runat="server" ID="RadScriptManager1" /> <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" /> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadTreeList1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl> <telerik:AjaxUpdatedControl ControlID="SelectedItemsLabel"></telerik:AjaxUpdatedControl> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="RadTreeList2"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadTreeList2" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl> <telerik:AjaxUpdatedControl ControlID="SelectedItemLabel"></telerik:AjaxUpdatedControl> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="CheckBox1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl> <telerik:AjaxUpdatedControl ControlID="SelectedItemsLabel"></telerik:AjaxUpdatedControl> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <div class="demo-containers"> <div class="demo-container"> <span class="title">Multi row selection</span> <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" HeaderStyle-Width="80px" UniqueName="ID"> </telerik:TreeListBoundColumn> <telerik:TreeListBoundColumn DataField="Name" HeaderText="Sport" UniqueName="Name"></telerik:TreeListBoundColumn> </Columns> </telerik:RadTreeList> <span class="selectTitle">Selected items:</span> <fieldset class="siFieldset"> <asp:Label ID="SelectedItemsLabel" runat="server"></asp:Label> </fieldset> </div> <div class="demo-container"> <span class="title">Single row selection</span> <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList2" runat="server" OnNeedDataSource="RadTreeList1_NeedDataSource" DataKeyNames="ID" ParentDataKeyNames="TypeID" AutoGenerateColumns="false"> <ItemStyle VerticalAlign="Middle"></ItemStyle> <Columns> <telerik:TreeListBoundColumn DataField="ID" HeaderText="SportID" UniqueName="ID" HeaderStyle-Width="40px"></telerik:TreeListBoundColumn> <telerik:TreeListBoundColumn DataField="Name" HeaderText="Sport" UniqueName="Name"></telerik:TreeListBoundColumn> <telerik:TreeListTemplateColumn HeaderStyle-Width="180px"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> <telerik:RadButton RenderMode="Lightweight" ID="SelectButton" runat="server" Text="+" CommandName="Select" Width="24px"> </telerik:RadButton> <telerik:RadButton RenderMode="Lightweight" ID="DeselectButton" runat="server" Text="-" CommandName="Deselect" Width="24px"> </telerik:RadButton> </ItemTemplate> <ItemStyle HorizontalAlign="Center" /> </telerik:TreeListTemplateColumn> </Columns> </telerik:RadTreeList> <span class="selectTitle">Selected item:</span> <fieldset class="siFieldset"> <asp:Label ID="SelectedItemLabel" runat="server"></asp:Label> </fieldset> </div> </div> <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server"> <Views> <qsf:View> <asp:CheckBox OnCheckedChanged="CheckBox1_CheckedChanged" runat="server" ID="CheckBox1" AutoPostBack="true" Text="Allow Recursive Selection (Used in Multi row selection example)"></asp:CheckBox> </qsf:View> </Views> </qsf:ConfiguratorPanel> </form> </body> </html>