An Extensive Examination of the DataGrid Web Control: Part 4By Scott Mitchell
|The Fourth Part in a Multi-Part Series|
This article is the fourth piece of a multi-part series on using the DataGrid Web control that will span
several weeks. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is
highly versatile. The basics of the DataGrid were discussed in Part 1;
information on specifying display properties of the DataGrid was discussed in
Part 2. In Part 3
we examined how to associate custom events with the DataGrid. In this part we'll look at how to extend
Part 3 to provide custom sorting on the results of a DataGrid!
Recall that in Part 3 of this series we examined how to associate certain events, like the click of a button, with actions. For example, in a live demo we showed how to allow the user to click a "Details" button to show specific information about one of the rows in the DataGrid. In this part we'll expand on the notion of tying buttons in the DataGrid to an action to allow the end user to sort the contents of the DataGrid on the fly.
Preparing a DataGrid for Sorting
You'll be pleased to learn that adding support for sorting to a DataGrid is very simple, and can be broken down into the following three steps:
- Set the
AllowSortingproperty of the DataGrid to True. If the DataGrid's
AutoGenerateColumnsproperty is set to False, specify the
SortExpressionproperty in the
BoundColumncontrols that represent the rows you'd like the user to be able to sort on.
- Create a sort event handler that repopulates the DataGrid with the sorted data, and specify the
name of this sort event handler in the DataGrid's
- Create a function that will allow you to grab the data from your data store in sorted format.
Let's tackle these steps one at a time. For the first step, you need to specify the
property in your DataGrid, like so:
If you have the
AutoGenerateColumns property set to True (the default) you've completed
step 1. (Recall that if the
AutoGenerateColumns property set to True then the columns of
the DataGrid are determined by the columns in the source you are binding to the DataGrid. If
AutoGenerateColumns property set to False, then you have to explicitly specify what
columns should appear in the DataGrid via
BoundColumns. See Part
2 of this series for more information on this topic.) If, however, you have
AutoGenerateColumns property set to False, then you will need to decide what column(s)
you want to allow the user to sort on. For all the columns you want to let the user sort, you must add
SortExpression property to the
BoundColumn. Note that you should give
SortExpression property the name of the column in the database:
In the above example the DataGrid will have two columns, one binding to the database column
dbField and the other to dbField2. The latter column will be able to be sorted while
the first will not (since the latter has a
SortExpression property specified while the
former does not).
Creating a Sort Event Handler
By adding the
AllowSortingproperty to True, the DataGrid, when rendered, will have in its header for each column a hyperlink. When clicked, a postback occurs and the sort event is raised. When this event is raised we'd like to have a sort event handler fire that requeries the data store, getting the data in the specified sorted order, and rebinds it to the DataGrid. In order to have this happen we need to do two things: create a sort event handler and specify the event handler for the DataGrid's sort event.
First, when creating the event handler you must use the following definition:
(Of course you can name the variables
e whatever you like - the
important part is realizing that you need to have your event handler accept two variables: an Object
Inside your event handler you can retrieve the name of the column that was sorted via:
If you explicitly specified the
SortExpression property in a
the value of
e.SortExpression is the value of the
SortExpression property; if
you did not specify a
SortExpression property (because you had
set to True), then the value of
e.SortExpression is the value of the database column name
that represents the column clicked.
Once you sort event handler is created you need to associate it with the DataGrid's sort event, so
that when this event is raised the proper event handler is fired. To accomplish this simply set the
OnSortCommand event handler to the name of the sort event handler you created,
At this point a couple of demos might be helpful. I've created two of them,
one that uses
AutoGenerateColumns set to True, and
one that uses
AutoGenerateColumns set to False. Both
examples set the
AllowSorting property to True and have a very simple sort event handler
that does nothing but set a label Web control's
Text property to the value of
e.SortExpression. Note that the DataGrid is enclosed in a server-side form
<form runat="server"> ... </form>) - this is essential, since we are dealing
with postbacks here.
All that we have left to do is to create a function that retrieves the data in a specified sorted order.
Once we have this function the code for our sort event handler becomes trivial - we simply need to call
this function, passing in the
SortExpression, and then setting its result to the
DataSource and rebinding the DataGrid (via
look at how to accomplish this in Part 2 of this article.