Paging and Sorting in Gridview

Background

In this article, we will learn about implementing paging and sorting in a GridView for displaying many records in a GridView. So let us learn step-by-step so students can understand.

Step 1

Create Web Site as

"Start" - "All Programs" - "Microsoft Visual Studio 2010".
"File" - "New" - "Project..." then select "C#" - "Empty Project" (to avoid adding a master page).
Provide the project a name such as "GridPagingSorting" or another as you wish and specify the location.
Then right-click on Solution Explorer rhen select "Add New Item" - "Default.aspx" page.
Drag and Drop one GridView to the Default.aspx page. Then the page will look such as follows.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body bgcolor="silver">
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None">
</asp:GridView>
</form>
</body>
</html>

Step 2

Create a function inside the Default.aspx.cs and call it Bindgrid to bind the GridView as in the following:

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bindgrid();
}
}
private void Bindgrid()
{
connection();
query = "select *from Employee";//not recommended this i have written just for example,write stored procedure for security
com = new SqlCommand(query, con);
SqlDataAdapter da = new SqlDataAdapter(com);
dt = new DataTable();
da.Fill(dt);
ViewState["Paging"] = dt;
GridView1.DataSource = dt;
GridView1.DataBind();
con.Close();
}

Now run the application. Now the records in the GridView will be as:

Step 3

Now the GridView is filled in from the Database. Now first we implement paging in the GridView with the following procedure.

Set the AllowPaging property of the GridView control to "true".

For example:

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" >

</asp:GridView>

Set the PageSize property of the GridView control to any number that specifies how many rows will be displayed in a GridView.

For example:

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="2" >

</asp:GridView>

Now we need to call the one function on the OnPageIndexChanging event that is placed insdie the GridViewPageEventArgs event. The following is the code that we need to call:

OnPageIndexChangin="Gridpaging"

protected void Gridpaging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
GridView1.DataSource = ViewState["Paging"];
GridView1.DataBind();
}

After calling the Gridpaging() function the GridView source code will look as in the following:

<asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="2" OnPageIndexChanging="Gridpaging" >
</asp:GridView>

Now run the application; the paging will be as in the following:

In the preceding page we see that there are two rows displayed in the Gridview because we have set PageSize=2. Currently, the paging is displayed in a number however we can also change it to an arrow button, images and so on.

Step 4

Now next we will see about the sorting.

The default paging in a GridView is in ascending order, to allow sorting in a GridView we need to use the following events of the GridView:

AllowPaging="true" that enables paging in the GridView.
OnSorting="sortingfunction" that sorts the columns using a function called on the OnSorting event.

Create the following function that we call on the OnSorting event of the GridView.

protected void Gridsorting(object sender, GridViewSortEventArgs e)
{
string ColumnTosort= e.SortExpression; //Reading the column name
if (CurrentSortDirection == SortDirection.Ascending) //sorting in Descending if current sorting is Ascending order
{
CurrentSortDirection = SortDirection.Descending;
SortGridView(ColumnTosort, DESCENDING);
}
else
{
CurrentSortDirection = SortDirection.Ascending; //sorting in Ascending order if current sorting is Descending
SortGridView(ColumnTosort, ASCENDING);
}
}

The preceding function is called on the OnSorting event that fires a GridViewSortEventArgs event and gives the current column name after clicking on the GridView column. We then sort by column checking the current sorting and depending on that we sort the columns.

Now run the application; the default is ascending order, so the records will be displayed in the GridView as follows:

Now click on the address column of the GridView. The records will sort by Descending order as shown below because the current sorting is in ascending order.

Now from the example above we see how paging and sorting in a GridView is done, the entire code is as follows.

Default.aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body bgcolor="Silver">
<form id="form1" runat="server">
<br />
<h4 style="color: #808000">
Article by Vithal Wadje</h4>
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AllowSorting="true" CellPadding="6" ForeColor="#333333"
GridLines="None" PageSize="2" AllowPaging="true" OnPageIndexChanging="Gridpaging" OnSorting="Gridsorting">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#7C6F57" />
<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
<PagerSettings FirstPageText="First" LastPageText="End"
NextPageText=">z" />
<PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#E3EAEB" />
<SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#F8FAFA" />
<SortedAscendingHeaderStyle BackColor="#246B61" />
<SortedDescendingCellStyle BackColor="#D4DFE1" />
<SortedDescendingHeaderStyle BackColor="#15524A" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Default.aspx.cs Page

using System;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
using System.Data;
public partial class _Default : System.Web.UI.Page
{
private SqlConnection con;
private SqlCommand com;
private string constr, query;
private const string ASCENDING = " ASC";
private const string DESCENDING = " DESC";
DataTable dt;
private void connection()
{
constr = ConfigurationManager.ConnectionStrings["getconn"].ToString();
con = new SqlConnection(constr);
con.Open();
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bindgrid();
}
}
private void Bindgrid()
{
connection();
query = "select *from Employee";//not recommended this i have written just for example,write stored procedure for security
com = new SqlCommand(query, con);
SqlDataAdapter da = new SqlDataAdapter(com);
dt = new DataTable();
da.Fill(dt);
ViewState["Paging"] = dt;
GridView1.DataSource = dt;
GridView1.DataBind();
con.Close();
}
protected void Gridpaging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
GridView1.DataSource = ViewState["Paging"];
GridView1.DataBind();
}
public SortDirection CurrentSortDirection
{
get
{
if (ViewState["sortDirection"] == null)
{
ViewState["sortDirection"] = SortDirection.Ascending;
}
return (SortDirection)ViewState["sortDirection"];
}
set
{
ViewState["sortDirection"] = value;
}
}
protected void Gridsorting(object sender, GridViewSortEventArgs e)
{
string ColumnTosort= e.SortExpression;
if (CurrentSortDirection == SortDirection.Ascending)
{
CurrentSortDirection = SortDirection.Descending;
SortGridView(ColumnTosort, DESCENDING);
}
else
{
CurrentSortDirection = SortDirection.Ascending;
SortGridView(ColumnTosort, ASCENDING);
}
}
private void SortGridView(string sortExpression, string direction)
{
// You can cache the DataTable for improving performance
dynamic dt=ViewState["Paging"];
DataTable dtsort = dt;
DataView dv = new DataView(dtsort);
dv.Sort = sortExpression + direction;
GridView1.DataSource = dv;
GridView1.DataBind();
}
}

Note

Download the Zip file from the attachment for the full source code of the application
Make changes in Web.config file as per your server location.

Summary

I hope this article is useful for all readers, if you have any suggestion then please contact me including beginners also.

3 Comments

Join the conversation! Your thoughts help the community grow.

Madhukar Krishna5y ago
Sir, It doesn't work properly. It sorts the entire gridview whereas only that page should be sorted
Vithal Wadje12y ago
also sir,its not working me,I am manually doing it
Sandeep Singh Shekhawat12y ago
Hey Vithal, How do you use this source code formatting? May you please help me for same?