Wednesday, September 1, 2010

Adding Sorting and Paging Gridview Control

by Srujana Eega, .Net Developer

Sorting
The capability to sort data is one of the most basic tools users have to navigate through a significant amount of data.The DataGrid control made sorting columns in a grid a relatively easy task. you just set "AllowSorting" attribute to true as shown below. After enabling sorting, you see that all grid columns have now become hyperlinks. Clicking a column header sorts that specific cloumn please copy the code as shown below.

Paging
Another common grid navigation feature that the GridView greatly improves on is paging. Same as sorting technique first enable paging by setting "AllowPaging" to true as shown below.

.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView.aspx.cs" Inherits="GridView" %>

<!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 id="Head1" runat="server">
<title>Sorting example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="EmployeeGridView" runat="server" AllowSorting="true" OnSorting="EmployeeGridView_Sorting"
AllowPaging="true" PageSize="2" OnPageIndexChanging="EmployeeGridView_PageIndexChanging">
</asp:GridView>
</div>
</form>
</body>
</html>

.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;
using System.Text;
using System.Text.RegularExpressions;

public partial class GridView : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// Create a new table.
DataTable EmployeeTable = new DataTable();

// Create the columns.
EmployeeTable.Columns.Add("Id", typeof(int));
EmployeeTable.Columns.Add("Name", typeof(string));
EmployeeTable.Columns.Add("Telephone Number", typeof(int));

EmployeeTable.Rows.Add(101, "David", 100);
EmployeeTable.Rows.Add(102, "Peter", 200);
EmployeeTable.Rows.Add(103, "Jack", 300);
EmployeeTable.Rows.Add(104, "Sandra", 400);

//Persist the table in the Session object.
Session["EmployeeTable"] = EmployeeTable;

//Bind the GridView control to the data source.
EmployeeGridView.DataSource = Session["EmployeeTable"];
EmployeeGridView.DataBind();
}

}

protected void EmployeeGridView_Sorting(object sender, GridViewSortEventArgs e)
{
//Retrieve the table from the session object.
DataTable dt = Session["EmployeeTable"] as DataTable;

if (dt != null)
{
//Sort the data.
dt.DefaultView.Sort = e.SortExpression + " " + GetSortDirection(e.SortExpression);
EmployeeGridView.DataSource = Session["EmployeeTable"];
EmployeeGridView.DataBind();
}
}

private string GetSortDirection(string column)
{
// By default, set the sort direction to ascending.
string sortDirection = "ASC";

// Retrieve the last column that was sorted.
string sortExpression = ViewState["SortExpression"] as string;

if (sortExpression != null)
{
// Check if the same column is being sorted.
// Otherwise, the default value can be returned.
if (sortExpression == column)
{
string lastDirection = ViewState["SortDirection"] as string;
if ((lastDirection != null) && (lastDirection == "ASC"))
{
sortDirection = "DESC";
}
}
}
// Save new values in ViewState.
ViewState["SortDirection"] = sortDirection;
ViewState["SortExpression"] = column;

return sortDirection;
}

protected void EmployeeGridView_PageIndexChanging (Object sender, GridViewPageEventArgs e)
{
EmployeeGridView.PageIndex = e.NewPageIndex;
EmployeeGridView.DataSource = Session["EmployeeTable"];
EmployeeGridView.DataBind();
}

}

1 comment: