Introduction:
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.
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!