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
  491UsaimNabeelSaid 2  4251 Hoffman AvenueManhattan, NY 10016   917-893-3384
  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
  516Joe Palmer 2  2571 Woodbridge LaneDetroit, MI 48201   313-576-8085
  520RaidisMerinoOrdóñez 2  3201 Khale StreetCharleston, SC 29424   843-570-9526
   523Bo Ojala 2  645 Francis MineChico, CA 95926   530-255-4321
   524Bo Ojala 2  645 Francis MineChico, CA 95926   530-255-4321
   526Alice Boucher 2  1236 Ashwood DriveNeola, IA 51559   712-485-8314
   529Alice Boucher 2  1236 Ashwood DriveNeola, IA 51559   712-485-8314
  544Daniel McCorkindale 2  2841 Mandan RoadSaint Louis, MO 63146   573-746-4839
   565Madeleine Broadbent 2  1571 Arthur AvenueLoves Park, IL 61111   815-877-9215
  567Bo Ojala 2  645 Francis MineChico, CA 95926   530-255-4321
   578Sharonne Lang 2  2297 Coal StreetAltoona, PA 16601    814-310-7814
  584ThủyKiềuChín 2  908 Jett LaneSanta Ana, CA 92705    310-760-0681
  594DomicioTerrazasGalarza 2  3517 Brannon StreetLos Angeles, CA 90071    213-229-0424
  605Maik Peters 2  2238 Railroad StreetMarquette, MI 49855    906-221-3665
   608Maurice Boileau 2  509 Nutters Barn LaneKamrar, IA 50132    515-539-0961
 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
 460UsaimNabeelSaid 109  4251 Hoffman AvenueManhattan, NY 10016   917-893-3384
 464RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  465WendyHGolding 109  3474 Oakway LaneGlendale, CA 91204   818-247-6418
  466RandyLDelgado 109  2090 Reel AvenueAlbuquerque, NM 87107   505-343-0648
  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
 503Heike Hertzog 109  4187 Spring Haven TrailLivingston, NJ 07039    973-758-4322
  527Alice Boucher 109  1236 Ashwood DriveNeola, IA 51559   712-485-8314
  528Alice Boucher 109  1236 Ashwood DriveNeola, IA 51559   712-485-8314
  531Madeleine Broadbent 109  1571 Arthur AvenueLoves Park, IL 61111   815-877-9215
  532Madeleine Broadbent 109  1571 Arthur AvenueLoves Park, IL 61111   815-877-9215
  560Daniel McCorkindale 109  2841 Mandan RoadSaint Louis, MO 63146   573-746-4839
 596DomicioTerrazasGalarza 109  3517 Brannon StreetLos Angeles, CA 90071    213-229-0424
 609Maslin Gadbois 109  2796 Arthur AvenueChicago, IL 60654    815-783-5038
 611Maslin Gadbois 109  2796 Arthur AvenueChicago, IL 60654    815-783-5038
  • 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