Alphabetical Paging in Gridview

Alphabetical Paging in Gridview

Mayur

GridView paging feature allow us to display fixed number of records on the page and browse to the next page of records. Although paging is a great feature but sometimes we need to view all the items alphabetically. The idea behind this article is to provide a user with a list of all the alphabets and when the user clicks on a certain alphabet then all the records starting with that alphabet will be populated in the GridView control.

using System;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page

{

string constr;

protected void Page_Load(object sender, EventArgs e)

{

if (IsPostBack == false)

{

constr = "SELECT * from emp";

binddata(constr);

}

}

public void binddata(string s)

{

string connectionString = "server=TECH-DA98E1DFBA\\SQLEXPRESS;user id=raji;password=chekuri;database=raji";

SqlConnection con = new SqlConnection(connectionString);

SqlDataAdapter da = new SqlDataAdapter(constr , con);

DataSet ds = new DataSet();

da.Fill(ds);

GridView1.DataSource = ds;

GridView1.DataBind();

}

//The RowCreated event is used to create the list.

// In the event first I check for the footer row.

// Once, the footer row is found I run a loop from 65 to 92 and convert each number into the character representation.

// The number 65 stands for “A”, 66 for “B” and so on till 92 for “Z”. Inside the loop I created LinkButton and set the Text property to the alphabet. Finally, the control is added to the cell collection.

//Creating the Alphabetical List:

//The next task is to create an alphabetical list and display it in the GridView control.

//The best place to display the list is the GridView footer. Let’s check out the code which is used to create the list.

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.Footer)

{

TableCell cell = e.Row.Cells[0];

cell.ColumnSpan = 3;

for (int i = 65; i <= (65 + 25); i++)

{

LinkButton lb = new LinkButton();

lb.Text = Char.ConvertFromUtf32(i) + " ";

lb.CommandArgument = Char.ConvertFromUtf32(i);

lb.CommandName = "AlphaPaging";

cell.Controls.Add(lb);

}

}

}

//Fetching the Records Based on the Alphabet:

//In the last section we created the alphabets and displayed them in the footer of the GridView control.

//The next task is to capture the event generated by the alphabets when we click on them and fetch the results based on the alphabet. The RowCommand event is fired whenever you click on any alphabet.

// Take a look at the RowCommand event below:

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName.Equals("AlphaPaging"))

{

constr = "select * from emp WHERE ename LIKE '" + e.CommandArgument + "%'";

binddata(constr);

}

}

}