How to do pagination for the GridView data ?

Introduction

GridvIew control is a powerful data grid control that allows us to display the data in tabular format with sorting and pagination. It also allows us to manipulate the data.

Get hundreds of ASP.NET Tips and Tricks and ASP.NET Online training here.

In this article we are going to learn how to do paginations to display large number of records on the page using GridView and Display a custom message when no records to display in the GridView. Let's create a sample page to see how to do this.

ASPX PAGE

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" OnPageIndexChanging="PaginateTheData" PageSize="2" PagerSettings-Mode="Numeric"/>

In the above code snippet, we have a GridView in the .aspx page with AllowPaging="true" that will bring the Page numbers at the bottom of the GridView. Then we need to specify the number of records to show per page that can be set using PageSize property of the GridView. PagerSettings property allows us to set different mode of displaying the pagination. Once we have set AllowPaging="true", we need to handle the OnPageIndexChanging event and for this we have attached PaginateTheData server side method to fire. 

CODE BEHIND

string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
/// <summary>
/// Paginates the data.
/// </summary>
/// <param name="sender">The sender.</param>
/// <param name="e">The <see cref="System.Web.UI.WebControls.GridViewPageEventArgs"/>
protected void PaginateTheData(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
this.BindData();
}
/// <summary>
/// Binds the data.
/// </summary>
/// <returns></returns>
private void BindData()
{
DataTable table = new DataTable();
// get the connection
using (SqlConnection conn = new SqlConnection(_connStr))
{
// write the sql statement to execute
string sql = "SELECT AutoId, FirstName, LastName, Age, Active FROM PersonalDetail ORDER By AutoId";
// instantiate the command object to fire
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
// get the adapter object and attach the command object to it
using (SqlDataAdapter ad = new SqlDataAdapter(cmd))
{
// fire Fill method to fetch the data and fill into DataTable
ad.Fill(table);
}
}
}
GridView1.DataSource = table;
GridView1.DataBind();
}

In the PaginateTheData method we have set the current page index of the GridView to the new Index that is clicked by the user and again bounded the GridView.

NOTE: In case you have large amount of data to display, it is not suggested to use out of the box paging feature of the GridView (the above explained way) but you should use the  custom pagination to display the data (explained later in this series of the article).

OUTPUT

Now,To display a custom message when no records to display in the GridView, we can follow bellow approach.

ASPX PAGE

<asp:GridView ID="GridView1" runat="server" EmptyDataText="<p><b>No records found.</b></p>" /> 

In the above code we have set EmptyDataText property as “No records found.” to the GridView (you can
keep html tags as well eg. “<b>No records found</b>").

CODE BEHIND

protected void Page_Load(object sender, EventArgs e)
{
GridView1.DataSource = new DataTable();
GridView1.DataBind();
}

Setting EmptyDataText displays the text in case the DataSource of the GridView doesn’t have any records to show.

In the code behind, we have set the new instance of the DataTable as the source (naturally, there will
not be any rows into it), that’s why notice that we are able to see the “No records found.” text as
output.

OUTPUT