Introduction
Licensing
Knowledge Base
Controls / Grid / Functionality / Paging / Changing the Default Pager / Setting Pager Template
New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Setting Pager Template

You can use a template to set the appearance and features of the Pager item.

To create a pager template,

  1. Choose Edit Templates from the RadGrid Smart Tag.

  2. From the drop-down list of possible templates to edit, select the "PagerTemplate" for the MasterTableView or detail GridTableView of interest.

  3. On the Template Design surface, drag and drop any controls from the toolbox, or add any HTML elements you want.

  4. When you are finished, click End Template Editing from the Smart Tag.

Binding controls inside a PagerTemplate

All command buttons in the template can take advantage of the command API. For example a button with CommandName "Page" and CommandArgument of "Last" will force RadGrid to go to the last page when clicked, with no additional coding on your part. Here is a list of Pager-related commands:

CommandNameCommandArgumentDescription
Page"First"Goes to the first page.
Page"Last"Goes to the last page.
Page"Next"Goes to the next page.
Page"Prev"Goes to the previous page.
PageAn integer (e.g. "5")Goes to the specified page.

In addition, you can use declarative binding expressions in template controls, setting control properties based on the properties of the PagerItem instance. These include Paging.PageCount, Paging.PageSize, and OwnerTableView.CurrentPageIndex.

Pager Template

ASP.NET
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" Width="97%" AllowPaging="true" PageSize="10"
	DataSourceID="SqlDataSource1" OnItemCommand="RadGrid1_ItemCommand">
	<MasterTableView>
		<PagerTemplate>
			<table border="0" cellpadding="5" width="100%">
				<tr>
					<td style="border-style: none;" height="18px">
						<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Page" CausesValidation="false"
							CommandArgument="First">First</asp:LinkButton>
					</td>
					<td style="border-style: none;" height="18px">
						<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Page" CausesValidation="false"
							CommandArgument="Prev">Prev</asp:LinkButton>
					</td>
					<td style="border-style: none;" height="18px">
						<asp:TextBox ID="tbPageNumber" runat="server" Columns="3" Text='<%# Container.OwnerTableView.CurrentPageIndex + 1 %>' />
						<asp:RangeValidator runat="Server" ID="RangeValidator1" ControlToValidate="tbPageNumber"
							EnableClientScript="true" MinimumValue="1" Type="Integer" MaximumValue='<%# Container.OwnerTableView.PageCount %>'
							ErrorMessage='"Value must be in the range of 1 - " + "<%# Container.OwnerTableView.PageCount %>"'
							Display="Dynamic">     </asp:RangeValidator>
					</td>
					<td style="border-style: none;" height="18px">
						<asp:LinkButton ID="LinkButton3" runat="server" CommandName="CustomChangePage">Go</asp:LinkButton>
					</td>
					<td style="border-style: none;" height="18px">
						<asp:LinkButton ID="LinkButton4" runat="server" CommandName="Page" CausesValidation="false"
							CommandArgument="Next">Next</asp:LinkButton>
					</td>
					<td style="border-style: none;" height="18px">
						<asp:LinkButton ID="LinkButton5" runat="server" CommandName="Page" CausesValidation="false"
							CommandArgument="Last">Last</asp:LinkButton>
					</td>
					<td>
						<asp:Label Text="Page Size:" AssociatedControlID="pageSizeDropDown" runat="server" />
						<asp:DropDownList runat="server" ID="pageSizeDropDown" OnSelectedIndexChanged="pageSizeDropDown_SelectedIndexChanged" AutoPostBack="true" SelectedValue='<%# Container.OwnerTableView.PageSize %>' CausesValidation="false">
							<asp:ListItem Text="1" Value="1" />
							<asp:ListItem Text="2" Value="2" />
							<asp:ListItem Text="3" Value="3" />
							<asp:ListItem Text="4" Value="4" />
							<asp:ListItem Text="5" Value="5" />
							<asp:ListItem Text="10" Value="10" />
						</asp:DropDownList>
					</td>
					<td style="border-style: none; width: 100%" align="right" height="18px">
						<asp:LinkButton ID="LinkButton6" runat="server" CommandName="RebindGrid" CausesValidation="false">Refresh data</asp:LinkButton>
					</td>
				</tr>
			</table>
		</PagerTemplate>
	</MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
	SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
C#
protected void pageSizeDropDown_SelectedIndexChanged(object sender, EventArgs e)
{
	RadGrid1.PageSize = int.Parse((sender as DropDownList).SelectedValue);
	RadGrid1.Rebind();
}

protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
	if (e.CommandName == "CustomChangePage")
	{
		TextBox tb = e.Item.FindControl("tbPageNumber") as TextBox;
		int desiredPageNumber = int.Parse(tb.Text);
		RadGrid grid = sender as RadGrid;
		grid.CurrentPageIndex = desiredPageNumber - 1; //pages in the grid are zero-based, but humans count from 1
		grid.Rebind();
	}
}

Setting preferences for controls inside the PagerTemplate at runtime

There are cases when you may want to access the controls inside your PagerTemplate from the code-behind and dynamically change their preferences. Here are the steps you can perform to reference controls inside the PagerTemplate programmatically:

  1. Add a handler for the grid's ItemCreated event.

  2. In the ItemCreated event handler, check whether the currently bound item is GridPagerItem.

  3. Locate the desired control using the FindControl method of the command item.

  4. Change the properties of the control instance as desired.

In the example below, The ItemCreated event handler is used to change the Text, CommandName and CommandArgument properties for LinkButton controls inside the PagerTemplate object:

ASP.NET
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid2" runat="server" Width="97%" AllowPaging="true" PageSize="10"
    DataSourceID="SqlDataSource2" OnItemCreated="RadGrid2_ItemCreated" Skin="Windows7">
    <MasterTableView>
        <PagerTemplate>
            <asp:LinkButton ID="LinkButton1" runat="server" />
            <asp:LinkButton ID="Linkbutton2" runat="server" />
        </PagerTemplate>
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="SELECT Country FROM [Customers]"></asp:SqlDataSource>

Displaying different controls in a PagerTemplate based on position

When the PagerStyle.Position property is set to "TopAndBottom", your page appears both above and below the records in the table view. You may want to display different controls depending on whether the pager is above or below the data items. You can do this by setting the visibility of controls in the ItemCreated event handler. To determine whether the pager item is displayed in the header or footer of the grid, check the NamingContainer for the GridPagerItem object (it will be GridTHead for the header and GridTFoot for the footer).

The following example illustrates this technique:

ASP.NET
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid3" runat="server" DataSourceID="SqlDataSource3" Width="97%"
    AllowSorting="True" AllowPaging="True" Skin="Windows7" OnItemCreated="RadGrid3_ItemCreated">
    <PagerStyle Mode="NumericPages" Position="TopAndBottom" />
    <MasterTableView Width="100%">
        <PagerTemplate>
            <table border="0" cellpadding="0" cellspacing="0" style="height: 20px" width="50%">
                <tr>
                    <td>
                        <asp:LinkButton ID="btnFirst" runat="server" CommandName="Page" CommandArgument="First">First</asp:LinkButton>
                    </td>
                    <td>
                        <asp:LinkButton ID="btnPrev" runat="server" CommandName="Page" CommandArgument="Prev">Prev</asp:LinkButton>
                    </td>
                    <td>
                        <asp:LinkButton ID="btnNext" runat="server" CommandName="Page" CommandArgument="Next">Next</asp:LinkButton>
                    </td>
                    <td>
                        <asp:LinkButton ID="btnLast" runat="server" CommandName="Page" CommandArgument="Last">Last</asp:LinkButton>
                    </td>
                </tr>
            </table>
        </PagerTemplate>
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="SELECT Country FROM [Customers]"></asp:SqlDataSource>

Defining PagerTemplate programmatically

To assign the PagerTemplate for a grid in the code-behind, you need to design a custom class that implements the ITemplate interface This class holds the controls for the template:

ASP.NET
<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid4" runat="server" DataSourceID="SqlDataSource4" Width="97%"
    AllowSorting="True" AllowPaging="True" Skin="Windows7">
    <PagerStyle Mode="NumericPages" Position="TopAndBottom" />
    <MasterTableView Width="100%">
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource4" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
    SelectCommand="SELECT Country FROM [Customers]"></asp:SqlDataSource>

In the Page_Init event handler, you can assign an instance of your template class to the PagerTemplate property of the desired GridTableView.

C#
protected void Page_Init(object sender, EventArgs e)
{
    RadGrid4.MasterTableView.PagerTemplate = new MyPagerTemplate();
}

For detailed information about how to create templates programmatically, see the following MSDN article:

https://msdn.microsoft.com/en-us/library/aa289501%28v=vs.71%29.aspx

In this article
Binding controls inside a PagerTemplateSetting preferences for controls inside the PagerTemplate at runtimeDisplaying different controls in a PagerTemplate based on positionDefining PagerTemplate programmatically
Not finding the help you need?
Contact Support