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

Basic Paging

When pager mode is set to NextPrevAndNumeric, you have the option to choose the page size control type.
Page 1 of 2
EmployeeIDLastNameFirstNameTitleAddressCityCountryHomePhoneReportsTo
Page 1 of 2
2FullerAndrewVice President, Sales908 W. Capital WayTacomaUSA(206) 555-9482 
  1DavolioNancySales Representative507 - 20th Ave. E. Apt. 2ASeattleUSA(206) 555-98572
  3LeverlingJanetSales Representative722 Moss Bay Blvd.KirklandUSA(206) 555-34122
  4PeacockMargaretSales Representative4110 Old Redmond Rd.RedmondUSA(206) 555-81222
 5BuchananStevenSales Manager14 Garrett HillLondonUK(71) 555-48482
  • Demo Configurator

The purpose of this demo is to show the built-in paging capabilities of RadTreeList control. You can choose between the following pager modes:

  • NextPrev
  • NumericPages
  • NextPrevAndNumeric
  • NextPrevNumericAndAdvanced
  • Advanced
  • Slider
RadTreeList provides PageSizeControlType property collection which is an enum of type PagerDropDownControlType and has three values available: None, RadComboBox, RadDropDownList with RadComboBox being the default one. As it name implies, the property specifies what type of page size drop down control will be rendered. The user is given an easy way to switch off the page size combo or replace it with its light weight counterpart RadDropDownList.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="VB" AutoEventWireup="false" Inherits="Telerik.TreeListExamplesVBNET.Paging.BasicPaging.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <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>
    <label for="RadTreeList1" runat="server" id="InfoLabel">
    </label>
    <qsf:MessageBox runat="server" ID="MessageBox1" Type="Info" Icon="Info">
        When pager mode is set to <b>NextPrevAndNumeric</b>,
             you have the option to choose the page size control type.
    </qsf:MessageBox>
    <div class="demo-container no-bg">
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" AllowPaging="true" DataSourceID="SqlDataSource1"
            DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo" PageSize="5">
            <PagerStyle Position="TopAndBottom" Mode="Slider"></PagerStyle>
        </telerik:RadTreeList>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [Address], [City], [Country], [HomePhone], [ReportsTo] FROM [Employees]"></asp:SqlDataSource>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <ul class="fb-group">
                    <li>
                        <qsf:ComboBox ID="RadComboBox1" runat="server" Width="250px" AutoPostBack="true"
                            OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged" Label="Pager mode:">
                            <Items>
                                <telerik:RadComboBoxItem Text="NextPrev" Value="0"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Text="NumericPages" Value="1"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Text="NextPrevAndNumeric" Value="2"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Text="NextPrevNumericAndAdvanced" Value="3"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Text="Advanced" Value="4"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Text="Slider" Value="5" Selected="true"></telerik:RadComboBoxItem>
                            </Items>
                        </qsf:ComboBox>
                    </li>
                    <li>
                        <qsf:ComboBox ID="ddlPageSizeControlType" runat="server" AutoPostBack="true" Width="250px"
                            OnSelectedIndexChanged="ddlPageSizeControlType_SelectedIndexChanged" Enabled="false"
                            Label="Page size control type:">
                            <Items>
                                <telerik:RadComboBoxItem Text="RadComboBox" Value="RadComboBox" Selected="True" />
                                <telerik:RadComboBoxItem Text="RadDropDownList" Value="RadDropDownList" />
                                <telerik:RadComboBoxItem Text="None" Value="None" />
                            </Items>
                        </qsf:ComboBox>
                    </li>
                    <li>
                        <qsf:ComboBox ID="RadComboBox2" runat="server" Width="250px" AutoPostBack="true"
                            OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged" Label="Pager position:">
                            <Items>
                                <telerik:RadComboBoxItem Text="Bottom" Value="0"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Text="Top" Value="1"></telerik:RadComboBoxItem>
                                <telerik:RadComboBoxItem Text="Top and Bottom" Value="2" Selected="true"></telerik:RadComboBoxItem>
                            </Items>
                        </qsf:ComboBox>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance