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

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
  6DavidMBradleyMr.24/19/1965 12:00:00 AM1/20/1998 12:00:00 AM3768 Door WayRedmond98052USUnited States913-555-0172
  303Daniel McCorkindale 2  2841 Mandan RoadSaint Louis, MO 63146   573-746-4839
   304WendyHGolding 2  3474 Oakway LaneGlendale, CA 91204   818-247-6418
  306Cameron Sato 2  2539 Glen StreetOwensboro, KY 42301   270-350-8962
  4Rob WaltersMr.1091/23/1965 12:00:00 AM1/5/1998 12:00:00 AM5678 Lakeview Blvd.Minneapolis55402USUnited States612-555-0100
  11JossefHGoldbergMr.1094/11/1949 12:00:00 AM2/24/1998 12:00:00 AM5670 Bel Air Dr.Renton98055USUnited States122-555-0189
  12TerriLeeDuffyMr.1099/1/1961 12:00:00 AM3/3/1998 12:00:00 AM7559 Worth Ct.Renton98055USUnited States819-555-0175
 42JeanETrenaryMr.1091/13/1966 12:00:00 AM1/12/1999 12:00:00 AM2383 Pepper DriveRedmond98052USUnited States685-555-0120
  46SariyaEHarnpadoungsatayaMr.1096/21/1977 12:00:00 AM1/13/1999 12:00:00 AM1185 Dallas DriveEverett98201USUnited States399-555-0176
  66JanainaBarreiro GambaroBuenoMrs.1093/3/1975 12:00:00 AM1/24/1999 12:00:00 AM5979 El PuebloIssaquah98027USUnited States623-555-0155
  106MaryEGibsonMrs.10910/14/1952 12:00:00 AM2/13/1999 12:00:00 AM3928 San FranciscoEverett98201USUnited States531-555-0183
  119JillAWilliamsMs.1097/19/1969 12:00:00 AM2/19/1999 12:00:00 AM3238 Laguna CircleEverett98201USUnited States510-555-0121
 140LauraFNormanMrs.1092/6/1966 12:00:00 AM3/4/1999 12:00:00 AM6937 E. 42nd StreetRenton98055USUnited States615-555-0110
 148JamesRHamiltonMr.1092/7/1973 12:00:00 AM3/7/1999 12:00:00 AM9652 Los AngelesMonroe98272USUnited States870-555-0122
 158DylanAMillerMr.1093/27/1977 12:00:00 AM3/12/1999 12:00:00 AM7048 LaurelKenmore98028USUnited States181-555-0156
 263OvidiuVCraciumMr.1092/18/1968 12:00:00 AM1/5/2001 12:00:00 AM5458 Gladstone DriveKenmore98028USUnited States719-555-0181
  267MichaelISullivanMr.1097/17/1969 12:00:00 AM1/30/2001 12:00:00 AM6510 Hacienda DriveRenton98055USUnited States465-555-0156
  270SharonBSalavariaMrs.1096/3/1951 12:00:00 AM2/18/2001 12:00:00 AM7165 Brock LaneRenton98055USUnited States970-555-0138
 273BrianSWelckerMr.1097/8/1967 12:00:00 AM3/18/2001 12:00:00 AM7772 Golden MeadowIssaquah98027USUnited States716-555-0127
  291GloriaLMiller 109  3672 Roguski RoadShreveport, LA 71101   318-272-6552
  292SelinaJWong 109  720 Ritter AvenueCenter Line, MI 48015   586-756-3821
 294HannahSPugh 109  3306 Clinton StreetLittle Rock, AR 72211   501-222-6942
 295MaryLTarkington 109  3052 Nuzum CourtWilliamsville, NY 14221   716-565-7221
  305MaryLTarkington 109  3052 Nuzum CourtWilliamsville, NY 14221   716-565-7221
  310MaryLTarkington 109  3052 Nuzum CourtWilliamsville, NY 14221   716-565-7221
  • Demo Configurator
  • Scroll height in pixels:
    Spin UpSpin Down
  • Scroll position is retained after postback:

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>
<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" />
<div class="demo-container no-bg">
    <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>
    </div>
    <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