An Extensive Examination of the DataGrid Web Control: Part 4

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! Read Part 5 Read Part 6 Read Part 7 Read Part 8 Read Part 9 Read Part 10 Read Part 11 Read Part 12 Read Part 13 Read Part 14 Read Part 15 Read Part 16 Read Part 17 Read Part 18

Introduction

Preparing a DataGrid for Sorting

1. Set the AllowSorting property of the DataGrid to True. If the DataGrid's AutoGenerateColumns property is set to False, specify the SortExpression property in the BoundColumn controls that represent the rows you'd like the user to be able to sort on.
2. 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 OnSortCommand event.
3. 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 AllowSorting property in your DataGrid, like so:

<asp:DataGrid runat="server" id="id" AllowSorting="True" ... > ... </asp:DataGrid>

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 the 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 the 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 a SortExpression property to the BoundColumn. Note that you should give this SortExpression property the name of the column in the database:

<asp:DataGrid runat="server" id="id" AutoGenerateColumns="False" AllowSorting="True"> <Columns> <asp:BoundColumn DataField="dbField" /> <asp:BoundColumn DataField="dbField2" SortExpression="dbField2" /> </Columns> </asp:datagrid>

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

First, when creating the event handler you must use the following definition:

Sub SortEventHandler(sender as Object, e as DataGridSortCommandEventArgs) ... End Sub

(Of course you can name the variables sender and e whatever you like - the important part is realizing that you need to have your event handler accept two variables: an Object and a DataGridSortCommandEventArgs.)

Inside your event handler you can retrieve the name of the column that was sorted via: e.SortExpression. If you explicitly specified the SortExpression property in a BoundColumn, then the value of e.SortExpression is the value of the SortExpression property; if you did not specify a SortExpression property (because you had AutoGenerateColumns 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 DataGrid's OnSortCommand event handler to the name of the sort event handler you created, like:

<asp:DataGrid runat="server" id="id" AllowSorting="True" OnSortCommand="NameOfSortEventHandler"> ... </asp:DataGrid>

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 DataGrid's DataSource and rebinding the DataGrid (via DataBind()). We'll look at how to accomplish this in Part 2 of this article.