Creating a Custom Pager for GridView
Introduction
The inbuilt pager of GridView control is limited to only few navigation
options (numbers, next-previous etc.). At times you need to customize the pager
to suit your applications requirement. One of the common requirements is the
ability to jump to a particular page of the grid. This is commonly achieved by
showing a DropDownList in the pager containing available pages. The user can
then jump directly to the required page. In this article I am going to
illustrate how such a custom pager can be created for your GridView control.
Requirement
To get a clear idea of our requirement let's see how the page should look
like. The following figure shows a GridView with custom pager.
As you can see the inbuilt pager of the GridView has been replaced by a
DropDownList. The DropDownList contains all the pager numbers. User can then
select a particular page number to jump to that page.
Solution
In order to create a custom pager for a GridView, you need to design its
PagerTemplate. The PagerTemplate governs the paging system of the GridView. By
default the PagerTemplate is empty. To understand how it works, create a new web
site in Visual Studio. We use Customers table from Northwind database for our
example. Drag and drop two SQL data source controls on the default web form.
Configure one of the SQL data source controls to select CustomerID, CompanyName,
ContactName and Country columns of the Customers table. This SQL data source
will be bound with a GridView control.
Configure the other SQL data source control to select total number of
customers (COUNT(*)) from the Customers table. This SQL data source will be used
to determine the total number of pages in the DropDownList.
Set the DataSourceID property of the GridView to SqlDataSource1. Also, set
its AllowPaging property to true. Now design the PagerTemplate of the GridView
as shown below:
The PagerTemplate consists of a Label control and a DropDownList control. Set
the AutoPostBack property of the DropDownList control to true. We need to
populate this DropDownList with available pages. We do this by handling
RowCreated event of the GridView. The RowCreated event is raised when each and
every row of the GridView (including header, footer and pager row) is being
created on the server. Add the following code in the RowCreated event handler.
protected void GridView1_RowCreated(object sender,
GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Pager)
{
DropDownList ddl = (DropDownList)e.Row.FindControl
("DropDownList1");
SqlDataReader reader = (SqlDataReader)SqlDataSource2.
Select(DataSourceSelectArguments.Empty);
if (reader.HasRows)
{
reader.Read();
int recordcount = reader.GetInt32(0);
int pagecount = recordcount / GridView1.PageSize;
for (int i = 1; i <= pagecount; i++)
{
ddl.Items.Add(i.ToString());
}
}
ddl.SelectedValue=(GridView1.PageIndex+1).ToString();
}
}
The code first checks the type of row being created using RowType property.
The RowType property is of type DataControlRowType and the value of Pager
indicates that the pager is being created. It then gets a reference of the
DropDownList from the PagerTemplate using FindControl() method. Then the total
number of customer records are obtained using SqlDataSource2 control. Recollect
that we configured SqlDataSource2 to execute COUNT(*) query against the
Customers table. The Select() method of SQL data source control executes the
SELECT query and returns its results as an SqlDataReader. The return value of
the Select() method is determined by DataSourceMode property of the SQL data
source control. The two possible return types are - DataReader and DataSet. If
the SqlDataReader contains any rows the total number of customers are fetched.
The total number of pages are then calculated based on the PageSize property of
the GridView (default is 10). Then items are added to the DropDownList depending
on the total number of pages. Finally, SelectedValue property of the
DropDownList is set to the current page index. Note that GridView page index
starts from 0 but we display page numbers starting from 1 and hence we need to
adjust the SelectedValue property by 1.
When the user selects a page number in the DropDownList we need to change the
current page displayed in the GridView. This is done by handling
SelectedIndexChanged event of the DropDownList.
protected void DropDownList1_SelectedIndexChanged
(object sender, EventArgs e)
{
int index = int.Parse(((DropDownList)sender).
SelectedValue) - 1;
GridView1.PageIndex = index;
}
The code retrieves the SelectedValue from the DropDownList and sets PageIndex
property of the GridView. The PageIndex property determines the current page
index of the GridView.
That's it! Run the web form and you should see the custom pager in action.