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
  399Isabel Burke 2  3437 Clifford StreetOakland, CA 94621   510-615-1721
  437Ondřej Honc 2  4125 Bryan AvenueMinneapolis, MN 55415   651-274-5093
   460UsaimNabeelSaid 2  4251 Hoffman AvenueManhattan, NY 10016   917-893-3384
  461Irena Spurná 2  407 Jody RoadSpringfield, PA 19064   610-604-2578
   464RandyLDelgado 2  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
   466RandyLDelgado 2  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  478FransALauritsen 2  3145 Brighton Circle RoadSaint Cloud, MN 56303   320-556-2959
  483FransALauritsen 2  3145 Brighton Circle RoadSaint Cloud, MN 56303   320-556-2959
  491UsaimNabeelSaid 2  4251 Hoffman AvenueManhattan, NY 10016   917-893-3384
   501Jaska Heinilä 2  4164 Wilkinson StreetNashville, TN 37210   615-466-4000
   508Joe Palmer 2  2571 Woodbridge LaneDetroit, MI 48201   313-576-8085
  510UsaimNabeelSaid 2  4251 Hoffman AvenueManhattan, NY 10016   917-893-3384
   514Ondřej Honc 2  4125 Bryan AvenueMinneapolis, MN 55415   651-274-5093
   515RaidisMerinoOrdóñez 2  3201 Khale StreetCharleston, SC 29424   843-570-9526
 4Rob WaltersMr.1091/23/1965 12:00:00 AM1/5/1998 12:00:00 AM5678 Lakeview Blvd.Minneapolis55402USUnited States612-555-0100
 6DavidMBradleyMr.1094/19/1965 12:00:00 AM1/20/1998 12:00:00 AM3768 Door WayRedmond98052USUnited States913-555-0172
 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
 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
 203TerryJEminhizerMr.1093/7/1976 12:00:00 AM4/3/1999 12:00:00 AM8668 Via NerudaBellevue98004USUnited States138-555-0118
 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
  293VeolaRSmith 109  2479 Rhapsody StreetLeesburg, FL 32749   352-326-5825
 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
  313MaryLTarkington 109  3052 Nuzum CourtWilliamsville, NY 14221   716-565-7221
  316HannahSPugh 109  3306 Clinton StreetLittle Rock, AR 72211   501-222-6942
  317HannahSPugh 109  3306 Clinton StreetLittle Rock, AR 72211   501-222-6942
  318HannahSPugh 109  3306 Clinton StreetLittle Rock, AR 72211   501-222-6942
  319HannahSPugh 109  3306 Clinton StreetLittle Rock, AR 72211   501-222-6942
  320HannahSPugh 109  3306 Clinton StreetLittle Rock, AR 72211   501-222-6942
  321HannahSPugh 109  3306 Clinton StreetLittle Rock, AR 72211   501-222-6942
  322SusanSThompson 109  1619 Catherine DrivePettibone, ND 58475   701-273-3202
  323SusanSThompson 109  1619 Catherine DrivePettibone, ND 58475   701-273-3202
 324SusanSThompson 109  1619 Catherine DrivePettibone, ND 58475   701-273-3202
 326RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
 328RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  330Kees GKnudsen 109  2013 Ethels LaneMulberry, FL 33860    863-869-1946
  331Kees GKnudsen 109  2013 Ethels LaneMulberry, FL 33860    863-869-1946
 350Isabel Burke 109  3437 Clifford StreetOakland, CA 94621   510-615-1721
 357Isabel Burke 109  3437 Clifford StreetOakland, CA 94621   510-615-1721
  369RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  370RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  371RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  372MaryLTarkington 109  3052 Nuzum CourtWilliamsville, NY 14221   716-565-7221
  373MaryLTarkington 109  3052 Nuzum CourtWilliamsville, NY 14221   716-565-7221
  374RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  375RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  378Eva Chromá 109  4412 Meadow LaneSan Francisco, CA 94104    707-267-7342
  379RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  382RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
 383Isabel Burke 109  3437 Clifford StreetOakland, CA 94621   510-615-1721
 387Isabel Burke 109  3437 Clifford StreetOakland, CA 94621   510-615-1721
 391Isabel Burke 109  3437 Clifford StreetOakland, CA 94621   510-615-1721
 395Isabel Burke 109  3437 Clifford StreetOakland, CA 94621   510-615-1721
 400Dubravka Delić 109  4257 Marie StreetHanover, MD 21076   410-963-0234
 408Dubravka Delić 109  4257 Marie StreetHanover, MD 21076   410-963-0234
 410Dubravka Delić 109  4257 Marie StreetHanover, MD 21076   410-963-0234
 412Dubravka Delić 109  4257 Marie StreetHanover, MD 21076   410-963-0234
 415Irena Spurná 109  407 Jody RoadSpringfield, PA 19064   610-604-2578
 422UsaimNabeelSaid 109  4251 Hoffman AvenueManhattan, NY 10016   917-893-3384
 423Irena Spurná 109  407 Jody RoadSpringfield, PA 19064   610-604-2578
 429FransALauritsen 109  3145 Brighton Circle RoadSaint Cloud, MN 56303   320-556-2959
  436Irena Spurná 109  407 Jody RoadSpringfield, PA 19064   610-604-2578
  439Irena Spurná 109  407 Jody RoadSpringfield, PA 19064   610-604-2578
  440Irena Spurná 109  407 Jody RoadSpringfield, PA 19064   610-604-2578
 441FransALauritsen 109  3145 Brighton Circle RoadSaint Cloud, MN 56303   320-556-2959
 444FransALauritsen 109  3145 Brighton Circle RoadSaint Cloud, MN 56303   320-556-2959
 447FransALauritsen 109  3145 Brighton Circle RoadSaint Cloud, MN 56303   320-556-2959
 450Joe Palmer 109  2571 Woodbridge LaneDetroit, MI 48201   313-576-8085
 456Joe Palmer 109  2571 Woodbridge LaneDetroit, MI 48201   313-576-8085
  465WendyHGolding 109  3474 Oakway LaneGlendale, CA 91204   818-247-6418
  471WendyHGolding 109  3474 Oakway LaneGlendale, CA 91204   818-247-6418
 473FransALauritsen 109  3145 Brighton Circle RoadSaint Cloud, MN 56303   320-556-2959
  489Alice Shah 109  2322 Lucy LaneColumbus, IN 47201   812-447-9918
  490Alice Shah 109  2322 Lucy LaneColumbus, IN 47201   812-447-9918
  502Lena Faber 109  1518 Philadelphia AvenueSalt Lake City, UT 84111    801-326-8041
  • 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