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.1094/19/1965 12:00:00 AM1/20/1998 12:00:00 AM3768 Door WayRedmond98052USUnited States913-555-0172
 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
 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
 273BrianSWelckerMr.1097/8/1967 12:00:00 AM3/18/2001 12:00:00 AM7772 Golden MeadowIssaquah98027USUnited States716-555-0127
  • 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