Custom Pagination in ASP.Net GridView Control

In this Blog I am going to cover the implementation of custom pagination for an ASP.Net Grid View control. It typically explains showing the custom Pager template for a Grid View control. It is based on my  experience and accumulated knowledge from various technical resources on the internet.

Introduction:

ASP.Net Grid View control has built-in feature of pagination which allows the developer to limit the number of rows of data. It is handled by pager template of GridView. The pager template can be shown either at top or bottom of the GridView. Pager template has the following modes of pagination NextPrevious, NextPreviousFirstLast, Numeric and NumericFirstLast.

In this blog, I am going to discuss to create a custom pager template where you can display any type of information as shown below.

Custom Pagination Template

Background:

RowCreated event of GridView is fired when a row is getting created after providing the data source to the GridView control. GridView control has a property to check the type of the current row being created. The basic idea is to check the type of the current row and then programmatically modifying the pager template.

It is a reusable component and can be used across application with minor code change.

I will explain the custom paging with the help of an example. In this example, I am going to add an HTML table to the pager template at runtime with two buttons Next and Prev and showing other information relevant to the current page of the grid.

Example:

Write the following code in RowCreated event of GridView. This event will be fired when each and every row of the GridView is getting created.

I have used some variables to store page specific information to be displayed in the pager template, see the inline comments for details about these variables.

After creating the desired template to be shown in the Pager of GridView, we need to add this HTML table to the GridView’s Pager row. This can be done using the LiteralControl which takes string, in our case HTML table, as a parameter and then it can be added to controls of GridView’s pager row.

Code Snippet:

aspx.cs file code:

//variable to store the total items in the grid view private int RecordsCount;  //Row_Created event to add custom pagination logic protected void grdJobList_RowCreated(object sender, GridViewRowEventArgs e) { int iPageSize = grdJobList.PageSize;      // page size of the grid view int iPageIndex = grdJobList.PageIndex;    // index of current page int iPageCount = grdJobList.PageCount;    // total no of pages in the grid view int iRowsInPage = grdJobList.Rows.Count;  // total no of rows for a particular page RecordsCount = n; // where n is the total no of records in the grid view, get it from                   //the row count property of the data source binded to grid view //check if the current row is the pager row if (e.Row.RowType == DataControlRowType.Pager) { //html for NEXT button string strNext = "&nbsp&nbsp<input type=\"Button\" value=\"Next\" style=\"background-color:Gold; font-   family:Arial;width:110px;height:30px;font-weight:bold;font-size:Large\" onclick=\" javascript:__doPostBack('ctl00$cphMain$grdJobList','Page$Next'); \" />\n"; //html for Previous button string strPrev = "<input type=\"Button\" value=\"Prev\" style=\"background-color:Gold; font- family:Arial;width:110px;height:30px;font-weight:bold;font-size:Large\" onclick=\" javascript:__doPostBack('ctl00$cphMain$grdJobList','Page$Prev');\" />\n"; //if it is the first page if (iPageIndex == 0) { //customized pager template in a table format string sTemplate = null; sTemplate += "<table style=\"width:100%\">\n"; sTemplate += "<tr>\n"; sTemplate += "<td style=\"width:33%\" align=\"left\">\n"; sTemplate += string.Format("{0} {1} - {2} of {3} ", strGridContents,   (iPageIndex * iPageSize) + 1, iPageSize + (iPageSize * iPageIndex), RecordsCount); sTemplate += "</td>\n\n"; sTemplate += "<td style=\"width:34%\" align=\"center\">\n"; sTemplate += strNext; sTemplate += "</td>\n"; sTemplate += "<td style=\"width:33%\" align=\"right\">\n"; sTemplate += string.Format("Page {0} of {1}", iPageIndex + 1, iPageCount); sTemplate += "</td>\n</tr>\n</table>\n"; //Adding new pager template to the grid e.Row.Cells[0].Controls.Add(new LiteralControl(sTemplate)); } //if its not the first and the last page if (iPageIndex != 0 && iPageIndex != iPageCount - 1) { //customized pager template in a table format string sTemplate = null; sTemplate += "<table style=\"width:100%\">\n"; sTemplate += "<tr>\n"; sTemplate += "<td style=\"width:25%\" align=\"left\">\n"; sTemplate += string.Format("{0} {1} - {2} of {3} ", strGridContents, (iPageIndex * iPageSize) + 1, iPageSize + (iPageSize * iPageIndex), RecordsCount); sTemplate += "</td>\n"; sTemplate += "<td style=\"width:25%\" align=\"right\">\n"; sTemplate += strPrev; sTemplate += "</td >\n\n"; sTemplate += "<td style=\"width:25%\" align=\"left\">\n"; sTemplate += strNext; sTemplate"</td>\n"; sTemplate += "<td style=\"width:25%\" align=\"right\">\n"; sTemplate += string.Format("Page {0} of {1}", iPageIndex + 1, iPageCount); sTemplate += "</td>\n</tr>\n</table>\n"; //Adding new pager template to the grid e.Row.Cells[0].Controls.Add(new LiteralControl(sTemplate)); } //if it is the last page if (iPageIndex == iPageCount - 1) { //customized pager template in a table format string sTemplate = null; sTemplate += "<table style=\"width:100%\">\n"; sTemplate += "<tr>\n"; sTemplate += "<td style=\"width:33%\" align=\"left\">\n"; sTemplate += string.Format("{0} {1} - {2} of {3} ", strGridContents, (iPageIndex * iPageSize) + 1, iRowsInPage + (iPageSize * iPageIndex), RecordsCount); sTemplate += "</td>\n"; sTemplate += "<td style=\"width:34%\" align=\"center\">\n"; sTemplate += strPrev; sTemplate += "</td >\n\n"; sTemplate += "<td style=\"width:33%\" align=\"right\">\n"; sTemplate += string.Format("Page {0} of {1}", iPageIndex + 1, iPageCount); sTemplate += "</td>\n</tr>\n</table>\n"; //Adding new pager template to the grid e.Row.Cells[0].Controls.Add(new LiteralControl(sTemplate)); } } }

aspx file code:

<asp:GridView id="grdJobList" runat="server" Font-Bold="True" BorderWidth="1px" BorderStyle="None" BorderColor="#DEDFDE" ForeColor="Black" CellPadding="4" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="objJobListMethod" PageSize="9" AllowPaging="True" onrowcreated="grdJobList_RowCreated"> <PagerSettings Mode="NextPrevious" FirstPageText="" LastPageText="" NextPageText="" PreviousPageText="" />   <PagerStyle ForeColor="Black" HorizontalAlign="Center" Height="20px">                        </PagerStyle>

            

To enable the pagination we need to set the PageSize and AllowPaging properties of GridView control. PagerSettings tag is used to provide the mode and other details of pager template. PagerStyle tag is used for providing look and feel as per the user’s requirement.