How to use pager in GridView control

The GridView control displays a pager bar when the AllowPaging property is set to true. Developer can control characteristics of the pager to a large extent, through the <PagerSettings> and <PagerStyle> tags or their equivalent properties. The GridView control’s pager supports first and last page buttons and lets developer assign an image to each button.  The pager can work in two modes:

–  Displaying exact page numbers. In this case the pager contains numeric links, one representing a page index.

–  Providing a relative navigation system. In this case, buttons are present to navigate to the next or previous page and even to the first or last page.

Developer can use PagerSettings.Mode property to specify user interface of the pager. Possible modes are the following:

Mode Description
NextPrevious Displays next and previous buttons to access the next and previous pages of the grid.
NextPreviousFirstLast Displays next and previous buttons plus first and last buttons to directly access first and last pages of the grid.
Numeric Displays numeric link buttons corresponding to the pages of the grid.
NumericFirstLast Displays numeric link buttons corresponding to the pages of the grid plus first and last buttons to directly access first and last pages of the grid.

 

In addition developer can use pairs of properties zzzPageText and zzzPageImageUrl to set the labels for these buttons as desired. The zzz stands for any of the following First, Last, Next and Previous.

Depending of the size of the grid and to make it easier for users to page regardless of the scrollbar position, developer can enable top and bottom pagers for a grid. He does this by setting Position attribute on the <PagerSettings> element:

<PagerSettings Position=”TopAndBottom” />

Other possible options are to display the pager only at top or only at the bottom of the grid.

In case of need the pager of the GridView control can be entirely replaced with a new one. Developer does this by adding <PagerTemplate> element to the control’s declaration:

<PagerTemplate>

<asp:Button ID=”BtnFirst” runat=”server” commandname=”First” Text=”First” />

<asp:Button ID=”BtnPrev” runat=”server” commandname=”Prev” Text=”<<” />

<asp:Button ID=”BtnNext” runat=”server” commandname=”Next” Text=”>>” />

<asp:Button ID=”BtnLast” runat=”server” commandname=”Last” Text=”Last” />

</PagerTemplate>

 

Developer should write a RowCommand event handler to handle clicking on the buttons and set the page index explicitly:

void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == “Last”)
{
GridView1.PageIndex = GridView1.PageCount – 1;
BtnFirst.Enabled = true;
BtnPrev.Enabled = true;
BtnNext.Enabled = false;
BtnLast.Enabled = false;
}
if (e.CommandName == “First”)
{
GridView1.PageIndex = 0;
BtnFirst.Enabled = false;
BtnPrev.Enabled = false;
BtnNext.Enabled = true;
BntLast.Enabled = true;  
}
if (e.CommandName == “Next”)
{
GridView1.PageIndex++;
BtnFirst.Enabled = true;
BtnPrev.Enabled = true;
if ( GridView1.PageIndex < GridView.PageCount -1 )
{
BtnNext.Enabled = true;
BntLast.Enabled = true;  
}  
if (GridView1.PageIndex == GridView.PageCount -1 )
{
BtnNext.Enabled = false;
BtnLast.Enabled = false;
}

}  
if (e.CommandName == “Prev”)
{
GridView1.PageIndex–;
BtnNext.Enabled = true;
BntLast.Enabled = true;
if (GridView1.PageIndex > 0 )
{
BtnFirst.Enabled = true;
BtnPrev.Enabled = true;
}
if (  GridView1.PageIndex == 0 )
{
BtnFirst.Enabled = false;
BtnPrev.Enabled = false;

}
}