See Technical Demos of the New Features in the DevCraft R1 2017 Release Webinar. Save Your Seat!

TreeList - Scrolling

Employee IDFirst NameMiddle NameLast NameTitleManager IDBirth DateHire DateAddressCityPostal CodeRegionCountryPhone
 
109KenJS├ínchezMr. 3/2/1959 12:00:00 AM2/15/1999 12:00:00 AM4350 Minute Dr.Newport Hills98006USUnited States697-555-0142
 2KevinFBrownMr.1096/3/1977 12:00:00 AM2/26/1997 12:00:00 AM7883 Missing Canyon CourtEverett98201USUnited States150-555-0189
  12TerriLeeDuffyMr.29/1/1961 12:00:00 AM3/3/1998 12:00:00 AM7559 Worth Ct.Renton98055USUnited States819-555-0175
  140LauraFNormanMrs.22/6/1966 12:00:00 AM3/4/1999 12:00:00 AM6937 E. 42nd StreetRenton98055USUnited States615-555-0110
 3Roberto TamburelloMr.10912/13/1964 12:00:00 AM12/12/1997 12:00:00 AM2137 Birchwood DrRedmond98052USUnited States212-555-0187
 273BrianSWelckerMr.1097/8/1967 12:00:00 AM3/18/2001 12:00:00 AM7772 Golden MeadowIssaquah98027USUnited States716-555-0127
  316RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  317RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648

Demo Configurator

  • Scroll height in pixels:
  • Scroll position is retained after postback:
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Very often, when constructing a RadTreeList, there are design limitations regarding the size of the treelist. In such cases you will need to enable the client-side treelist scrolling option in order to fit it in the allowed space. In order to do that you need to set the AllowScroll property to true. By default its value is false. The ScrollHeight property specifies the height value beyond which the scrolling will be turned on. The default value is 300px.

Scrolling is fully supported client side and can be configured with the following options:
- Static headers - this option will set the header so that it does not scroll with the treelist and is always visible at the top. Set UseStaticHeaders property to true in order to enable it (the default value is false).
- Save scroll position - this option indicates whether the RadTreeList control will keep the scroll position during postbacks. Set SaveScrollPosition property to true in order to enable it (the default value is false).

In order to display horizontal scroll for navigation, you need to make sure that the total width of the columns (either auto-generated or declaratively set) exceeds the width of the treelist (as demonstrated in the online demo itself). Moreover, to render merely the horizontal scroll and avoid the appearance of the vertical scroll, make sure that the height of the records in the treelist does not exceed the ClientSettings -> Scrolling -> ScrollHeight scroll setting.


  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.TreeListExamplesCSharp.Scrolling.BasicScrolling.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ 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">
    <title>Telerik ASP.NET Example</title>
</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" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeList1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"
            DataKeyNames="EmployeeID" ParentDataKeyNames="ManagerID">
            <Columns>
                <telerik:TreeListBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="Employee ID">
                    <HeaderStyle Width="70px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="FirstName" UniqueName="FirstName" HeaderText="First Name">
                    <HeaderStyle Width="100px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="MiddleName" UniqueName="MiddleName" HeaderText="Middle Name">
                    <HeaderStyle Width="100px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LastName" UniqueName="LastName" HeaderText="Last Name">
                    <HeaderStyle Width="120px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Title" UniqueName="Title" HeaderText="Title">
                    <HeaderStyle Width="50px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="ManagerID" UniqueName="ManagerID" HeaderText="Manager ID">
                    <HeaderStyle Width="80px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="BirthDate" UniqueName="BirthDate" HeaderText="Birth Date">
                    <HeaderStyle Width="150px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="HireDate" UniqueName="HireDate" HeaderText="Hire Date">
                    <HeaderStyle Width="150px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Address" UniqueName="Address" HeaderText="Address">
                    <HeaderStyle Width="120px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="City" UniqueName="City" HeaderText="City">
                    <HeaderStyle Width="100px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="PostalCode" UniqueName="PostalCode" HeaderText="Postal Code">
                    <HeaderStyle Width="80px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Region" UniqueName="Region" HeaderText="Region">
                    <HeaderStyle Width="50px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Country" UniqueName="Country" HeaderText="Country">
                    <HeaderStyle Width="120px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Phone" UniqueName="Phone" HeaderText="Phone">
                    <HeaderStyle Width="100px"></HeaderStyle>
                </telerik:TreeListBoundColumn>
            </Columns>
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true"></Scrolling>
            </ClientSettings>
        </telerik:RadTreeList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SelfReferencingDbConnectionString %>"
        SelectCommand="SELECT * FROM [EmployeesNew]"></asp:SqlDataSource>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="CheckBox1" AutoPostBack="True" runat="server" Text="Use static headers"
                                    OnCheckedChanged="CheckedChanged"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <span class="label">Scroll height in pixels:</span>
                            <qsf:NumericTextBox ID="RadNumericTextBox1" runat="server" MinValue="100" MaxValue="1000"
                                Value="300" Size="Medium">
                                <NumberFormat DecimalDigits="0"></NumberFormat>
                            </qsf:NumericTextBox>
                            <qsf:Button ID="Button1" runat="server" Text="Set Scroll Height" OnClick="Button1_Click" Size="Medium"></qsf:Button>
                        </li>
                        <li>
                            <span class="label">Scroll position is retained after postback:</span>
                            <qsf:Button Text="PostBack" runat="server" ID="Button2" Size="Medium"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?