In this article I will explain with an example, how to implement Paging (Pagination) and Sorting in GridView control in ASP.Net using C# and VB.Net.
Database
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
HTML Markup
The following HTML Markup consists of an ASP.Net GridView with one TemplateField column and three BoundField columns. In order to implement Paging in GridView, AllowPaging property is set to true and OnPageIndexChanging event has been assigned.
For implementing Sorting, AllowSorting property is set to true and OnSorting event has been assigned.
Also for each TemplateField and BoundField column, the SortExpression property is set to the value of Column field.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true" OnSorting="OnSorting" OnPageIndexChanging="OnPageIndexChanging" PageSize="10">
<Columns>
<asp:TemplateField ItemStyle-Width="150px" HeaderText="Customer ID" SortExpression="CustomerID">
<ItemTemplate>
<%# Eval("CustomerID")%>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" SortExpression="ContactName" />
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Populating GridView from database
Inside the Page Load event of the page, the GridView is populated with records from the Customers table of the Northwind database.
The SortDirection property is a ViewState property which is used to save the Sort Direction of GridView during PostBacks.
Once the DataTable is populated, it is converted into a DataView and then the SortExpression and SortDirection values are used to sort the data.
C#
private string SortDirection
{
get { return ViewState["SortDirection"] != null ? ViewState["SortDirection"].ToString() : "ASC"; }
set { ViewState["SortDirection"] = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
private void BindGrid(string sortExpression = null)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, ContactName, City, Country FROM Customers"))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
if (sortExpression != null)
{
DataView dv = dt.AsDataView();
this.SortDirection = this.SortDirection == "ASC" ? "DESC" : "ASC";
dv.Sort = sortExpression + " " + this.SortDirection;
GridView1.DataSource = dv;
}
else
{
GridView1.DataSource = dt;
}
GridView1.DataBind();
}
}
}
}
}
VB.Net
Private Property SortDirection As String
Get
Return IIf(ViewState("SortDirection") IsNot Nothing, Convert.ToString(ViewState("SortDirection")), "ASC")
End Get
Set(value As String)
ViewState("SortDirection") = value
End Set
End Property
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindGrid()
End If
End Sub
Private Sub BindGrid(Optional ByVal sortExpression As String = Nothing)
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim con As SqlConnection = New SqlConnection(constr)
Dim cmd As SqlCommand = New SqlCommand("SELECT CustomerId, ContactName, City, Country FROM Customers")
Dim sda As SqlDataAdapter = New SqlDataAdapter
cmd.Connection = con
sda.SelectCommand = cmd
Dim dt As DataTable = New DataTable
sda.Fill(dt)
If (Not (sortExpression) Is Nothing) Then
Dim dv As DataView = dt.AsDataView
Me.SortDirection = IIf(Me.SortDirection = "ASC", "DESC", "ASC")
dv.Sort = sortExpression & " " & Me.SortDirection
GridView1.DataSource = dv
Else
GridView1.DataSource = dt
End If
GridView1.DataBind()
End Sub
Implementing Paging in GridView
The following event handler is executed when a page is changed inside the GridView.
The value of the PageIndex of the Page which was clicked is present inside the NewPageIndex property of the GridViewPageEventArgs object and it is set to the PageIndex property of the GridView and the GridView is again populated by calling the BindGrid function.
C#
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
this.BindGrid();
}
VB.Net
Protected Sub OnPageIndexChanging(sender As Object, e As GridViewPageEventArgs)
GridView1.PageIndex = e.NewPageIndex
Me.BindGrid()
End Sub
Implementing Sorting in GridView
The following event handler is executed when a Column is sorted in GridView.
The value of the Sort Expression of the Column which was clicked is present inside the SortExpression property of the GridViewSortEventArgs object and it is passed as parameter to the BindGrid function.
C#
protected void OnSorting(object sender, GridViewSortEventArgs e)
{
this.BindGrid(e.SortExpression);
}
VB.Net
Protected Sub OnSorting(ByVal sender As Object, ByVal e As GridViewSortEventArgs)
Me.BindGrid(e.SortExpression)
End Sub
Screenshot
![Paging and Sorting in ASP.Net GridView example]()
Demo
Downloads
