GridView Control PagerTemplate in C# and ASP.NET

This tutorial shows how we can modify the pager section of a GridView using the PagerTemplate tags. C# version.

This tutorial will give an introduction to using the PagerTemplate of a GridView control. The PagerTemplate allows us to set a certain layout that the pager of a GridView will conform to. In this example, we will create the PagerTemplate too show the current page and number of pages, as well as a dropdown menu to navigate between pages.

First, we will add the Connection String to the sample database, NorthWind:

</connectionStrings>

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

Next, we add the GridView to our ASPX page.
Note the code between the <PagerTemplate> tags, this is the layout for the GridView pager:

<asp:GridView id="CustomersGridView"

datasourceid="CustomersSqlDataSource"
autogeneratecolumns="False"
allowpaging="True"
ondatabound="CustomersGridView_DataBound"
runat="server" DataKeyNames="CustomerID">

<tr>

<asp:label id="MessageLabel"

forecolor="Blue"
text="Select a page:"
runat="server"/>

<asp:dropdownlist id="PageDropDownList"

autopostback="true"
onselectedindexchanged="PageDropDownList_SelectedIndexChanged"
runat="server"/>

</td>

<td style="width:70%; text-align:right">

<asp:label id="CurrentPageLabel" forecolor="Blue" runat="server"/>

</td>

</tr>

</table>

</PagerTemplate>

<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" />
<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />

</Columns>

</asp:GridView>

<asp:SqlDataSource id="CustomersSqlDataSource"

selectcommand="SELECT [CustomerID], [CompanyName], [Address], [City], [PostalCode], [Country] FROM [Customers]"
connectionstring="<%$ ConnectionStrings:ConnectionString %>"
runat="server">

</asp:SqlDataSource>

</form>

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

The code behind will look something like this:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

}

protected void PageDropDownList_SelectedIndexChanged(Object sender, EventArgs e)
{

GridViewRow pagerRow = CustomersGridView.BottomPagerRow;

DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");

CustomersGridView.PageIndex = pageList.SelectedIndex;

}

protected void CustomersGridView_DataBound(Object sender, EventArgs e)
{

GridViewRow pagerRow = CustomersGridView.BottomPagerRow;

DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");
Label pageLabel = (Label)pagerRow.Cells[0].FindControl("CurrentPageLabel");

if (pageList != null)
{

for (int i = 0; i < CustomersGridView.PageCount; i++)
{

int pageNumber = i + 1;
ListItem item = new ListItem(pageNumber.ToString());

if (i == CustomersGridView.PageIndex)
{

item.Selected = true;

}

pageList.Items.Add(item);

}

}

if (pageLabel != null)
{

int currentPage = CustomersGridView.PageIndex + 1;

pageLabel.Text = "Page " + currentPage.ToString() +

" of " + CustomersGridView.PageCount.ToString();

}

Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!