Sorting GridView Manually!

GridView control produces automatic sorting and paging behavior when bound to the SqlDataSource control. This is good news for developers who are using SqlDataSource. If you are using some other data source to populate the GridView you might need to add these features manually. In this article I will show you that how you can sort the columns of the GridView control when using a DataSet as the data source for the GridView.

Introduction:

Populating the GridView Control:

Let's first populate the GridView control with some data. In this article I will be using the Northwind database which is installed by default when you install SQL SERVER 7 or SQL SERVER 2000 database. Take a look at the code below which populates the GridView control.

private DataSet GetData()

{

SqlConnection myConnection = new SqlConnection(ConnectionString);

SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Categories", myConnection);

DataSet ds = new DataSet();

ad.Fill(ds);

return ds;

}

As, you can see I am using simple DataSet container to populate the GridView control. Now, let's talk about sorting.

GridView HTML Code:

The first thing that you must notice is that I am not using any template columns in this article. The columns are generated automatically for the GridView control which are bound to the data source. Take a look at the HTML generated by the GridView control to have a clear picture.

<asp:GridView ID="GridView1" runat="server" AllowSorting="True" OnSorting="GridView1_Sorting">

</asp:GridView>

The AllowSorting property has to be set to true so that it will render the GridView columns as links which can be clicked to fire the OnSorting event.

Sorting GridView Columns:

Sorting can be done in different ways but in this article I will show you that how you sort in ascending and descending order. The first thing you need to have is a property which returns you the sort direction. The sort direction represents that if the column has to be sorted in ascending or descending order.

public SortDirection GridViewSortDirection

{

get

{

if (ViewState["sortDirection"] == null)

ViewState["sortDirection"] = SortDirection.Ascending;

return (SortDirection) ViewState["sortDirection"];

}

set { ViewState["sortDirection"] = value; }

}

The GridViewSortDirection is a simple property which returns the new sort direction for the GridView control. Since, the header of the column triggers a postback that is why I am saving the last sort direction into the ViewState object. Once, I know the last direction I can give the user the new sort direction. This means that if the column was sorted in ascending order then the new direction has to be descending.

Now, let's take a look at the GridView_OnSorting event which is fired when you click the header of the column to sort it.

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)

{

string sortExpression = e.SortExpression;

if (GridViewSortDirection == SortDirection.Ascending)

{

GridViewSortDirection = SortDirection.Descending;

SortGridView(sortExpression, DESCENDING);

}

else

{

GridViewSortDirection = SortDirection.Ascending;

SortGridView(sortExpression, ASCENDING);

}

The first line gets the name of the column that is clicked. This means that if you clicked on the CategoryName column the e.SortExpression will contain "CategoryName". The code is pretty simple, I check that if the last sort direction is ascending if so, then I sort the data in descending order and vice versa. The SortGridView method is responsible for the actual sort. Take a look at the SortGridView method given below:

private void SortGridView(string sortExpression,string direction)

{

// You can cache the DataTable for improving performance

DataTable dt = GetData().Tables[0];

DataView dv = new DataView(dt);

dv.Sort = sortExpression + direction;

GridView1.DataSource = dv;

GridView1.DataBind();

}

The SortGridView method takes the sortExpression and the direction as the parameters. The GetData method gets the data from the database. At this point it is a good idea to put the DataTable object into a Cache object so you don't have to fetch the data from the database on each request. A DataView is created on the DataTable and is sorted using the sortExpression and the direction. Finally, the DataView object is used to populate the GridView.

I hope you liked the article, happy coding!