Grid

Controls

All Controls

Grid

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

Grid - Basic Paging

Example Configuration
Slider
TopAndBottom
RadComboBox
Data pager
Data pager
Page 1 of 10
 Item 1 to 10 of 91
Customer IDCompany NameContact NameContact TitleAddressPostal Code
Data pager
Data pager
Page 1 of 10
 Item 1 to 10 of 91
ALFKIAlfreds FutterkisteMaria AndersSales RepresentativeObere Str. 5712209
ANATRAna Trujillo Emparedados y heladosAna TrujilloOwnerAvda. de la Constitución 222205021
ANTONAntonio Moreno TaqueríaAntonio MorenoOwnerMataderos 231205023
AROUTAround the HornThomas HardySales Representative120 Hanover Sq.WA1 1DP
BERGSBerglunds snabbköpChristina BerglundOrder AdministratorBerguvsvägen 8S-958 22
BLAUSBlauer See DelikatessenHanna MoosSales RepresentativeForsterstr. 5768306
BLONPBlondesddsl père et filsFrédérique CiteauxMarketing Manager24, place Kléber67000
BOLIDBólido Comidas preparadasMartín SommerOwnerC/ Araquil, 6728023
BONAPBon app'Laurence LebihanOwner12, rue des Bouchers13008
BOTTMBottom-Dollar MarketsElizabeth LincolnAccounting Manager23 Tsawassen Blvd.T2F 8M4
You can familiarize with the basic paging capabilities of Telerik RadGrid from this online example. Pages can be changed by clicking on the page indicators in the footer.

The paging functionality can be enabled by setting the AllowPaging property to true. The available settings are: PageSize, PagerPosition (Top, Bottom or TopAndBottom) and Mode (NextPrev, NextPrevAndNumeric, NextPrevNumericAndAdvanced, NumericPages, Advanced, Slider). Additionally, in order to display the grid pager regardless of the number of records returned and the page size, you could set the PagerStyle -> AlwaysVisible property of the corresponding GridTableView to true. Its default value is false.

RadGrid 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.

Furthermore, you can set only the format of the text that will appear in the Pager using the PagerTextFormat property. The default format is:
Change page: {4} | Displaying page {0} of {1}, items {2} to {3} of {5}.

The {0}, {1}, {2}, {3} and {4} parameters are mandatory when setting the property.
  • {0} is used to display current page number.
  • {1} is total number of pages.
  • {2} will be replaced with the number of the first item in the current page.
  • {3} will be set to the number of the last item in the current page.
  • {4} indicates where pager buttons would appear.
  • {5} corresponds to number of all items in the datasource.
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" Inherits="Telerik.GridExamplesCSharp.Functionality.Paging.BasicPaging.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Basic Paging in Telerik ASP.NET AJAX Grid</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdateInitiatorPanelsOnly="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel" runat="server" Expanded="true">
        <label for="rcbPagerMode">Choose pager mode:</label>
        <telerik:RadDropDownList ID="rcbPagerMode" runat="server" AutoPostBack="true" Width="200px"
            OnSelectedIndexChanged="rcbPagerMode_SelectedIndexChanged">
            <Items>
                <telerik:DropDownListItem Text="Advanced" Value="Advanced" />
                <telerik:DropDownListItem Text="NextPrev" Value="NextPrev" />
                <telerik:DropDownListItem Text="NextPrevAndNumeric" Value="NextPrevAndNumeric" />
                <telerik:DropDownListItem Text="NextPrevNumericAndAdvanced" Value="NextPrevNumericAndAdvanced" />
                <telerik:DropDownListItem Text="NumericPages" Value="NumericPages" />
                <telerik:DropDownListItem Text="Slider" Value="Slider" Selected="True" />
            </Items>
        </telerik:RadDropDownList>
        <label for="ddlPagerPosition">Pager position:</label>
        <telerik:RadDropDownList ID="ddlPagerPosition" runat="server" AutoPostBack="true"
            OnSelectedIndexChanged="ddlPagerPosition_SelectedIndexChanged">
            <Items>
                <telerik:DropDownListItem Text="Top" Value="Top" />
                <telerik:DropDownListItem Text="Bottom" Value="Bottom" />
                <telerik:DropDownListItem Text="TopAndBottom" Value="TopAndBottom" Selected="True" />
            </Items>
        </telerik:RadDropDownList>
        <label for="ddlPageSizeControlType">Page size control type:</label>
        <telerik:RadDropDownList ID="ddlPageSizeControlType" runat="server" AutoPostBack="true"
            OnSelectedIndexChanged="ddlPageSizeControlType_SelectedIndexChanged" Enabled="false">
            <Items>
                <telerik:DropDownListItem Text="RadComboBox" Value="RadComboBox" Selected="True" />
                <telerik:DropDownListItem Text="RadDropDownList" Value="RadDropDownList" />
                <telerik:DropDownListItem Text="None" Value="None" />
            </Items>
        </telerik:RadDropDownList>
    </qsf:ConfiguratorPanel>
    <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowSorting="True"
        AllowPaging="True" GridLines="None" Width="100%">
        <PagerStyle Mode="Slider" Position="TopAndBottom" PageSizeControlType="RadComboBox"></PagerStyle>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
        runat="server"></asp:SqlDataSource>
    </form>
</body>
</html>