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

Server-side Selection

Multi row selection
SportIDSport
1Winter
2Summer
Selected items:
Single row selection
SportIDSport  
1Winter
2Summer
Selected item:
  • Demo Configurator

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" Inherits="Telerik.TreeListExamplesCSharp.Selecting.ServerSideSelection.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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>
                            &nbsp;
                        </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>

Support & Learning Resources

Find Assistance