In the first part
of this article, I gave you a quick introduction to the DataGrid server control.
In this concluding part, I will carry on from where we left off, and show you
how to make your grid more responsive and interactive.

Sorting the grid

We’ll begin with a demonstration of how you can sort the
data in the grid with a button click. This is followed by a group of properties—HyperlinkColumn,
ButtonColumn, and BoundColumn—which allow you to add some interesting custom
capabilities to your DataGrid.

Let’s start with Listing A which takes
off from where we ended last time. Here is the output from that code:

Figure A

Output from the DataGrid

The first change that you will notice is that column names
in the header row are clickable. Take the example for a quick test run by
clicking on each field and notice how the data sorts itself.

Now let’s look at the code behind this transformation. It
starts with the introduction of a strSortBy
string variable to store the name of the sorting parameter. The Page_Load() function
has also been updated: When the page loads for the first time, the id field is selected as the default sort
parameter.

Next you create an instance of the DataView object, which can
change the order of listing at run time. Just set this property to the column
to sort by, and DataView does the work.

Finally, you use some new properties of the DataGrid control
to glue things together. The AllowSorting
property activates sorting, while the OnSortCommand
property specifies the event handler to be invoked on receiving a sort request.
The second property has been set to dgsuperheroes_Sort(), which is the function
invoked by the .NET compiler when you click on one of the header fields. Within
this function, the SortExpression
property stores the name of the selected field and then rebinds the DataGrid
against this field to perform the sort.

Linking up

Next up, you can improve the interface of your DataGrid by
presenting only an abstract of the information up front, and inserting
hyperlinks into the DataGrid for detailed information. Listing B shows you how, and Figure B below shows the corresponding output:

Figure B

Inserting Hyperlinks into the DataGrid

Here, the DataGrid contains only two columns—the first lists
the IDs and the second has the names. If you click on any of the names, you’ll
be taken to another ASP.NET script that displays all the details about the
selected item.

The most important thing in this script is the AutoGenerateColumns property. This
property, if set to false, ensures that the .NET compiler will not generate the
columns of the DataGrid based on the fields of the table.

The obvious question is, how then do you generate these
columns? Simple, with the <Columns> element, which
encloses custom definitions for the columns that you want to display.

The first type of column is the <asp:BoundColumn>
type, which allows you to bind a column of the DataGrid to a field of the
database table. The required field is assigned to the DataField property of the <asp:BoundColumn> element.

Next, the <asp:HyperLinkColumn> element allows you
insert a column that will contain a link for each row in the DataGrid. The DataTextField property controls the
table field to be displayed in the column, the DataNavigateUrlFormatString property controls the URL target for
the hyperlink (note the {0} format for variable interpolation), while the DataNavigateUrlField property specifies
the database field to be used for interpolation.

If you click on the name of a superhero, you’ll be taken to
the more.aspx script, which takes the
id passed as a GET parameter, obtains the record from the database, and
displays it on the page.

Command center

The previous example introduced a column containing hyperlinks.
Now, you’ll see how to introduce a column that runs a custom command when a user
clicks it, for example, hiding or showing an element on the page.

To begin, you add two new columns to the DataGrid created
previously. The first of these new columns populates another DataGrid (on the
same page) with the details of the selected record, while the second column allows
the user to show or hide this new DataGrid at the click of a button.

Listing C is the resulting code, and the figure
below is sample output from that code:

Figure C

Show/Hide details using the DataGrid

The script actually contains two DataGrids; the first,
“dgsuperheroes”, displays the names of the superheroes and the
second, “dgsuperheroes_details”, displays the details of the selected
hero. By default, the second one is not visible when the page loads since we have
set its Visible attribute to false.

Coming back to the “dgsuperheroes” datagrid, you
will see that we have set the AutoGenerateColumns attribute to
“false” and introduced four custom columns: two
<asp:BoundColumn> for the record ID and name, and two
<asp:ButtonColumn> to hold custom commands.

Each <asp:ButtonColumn> element is associated with
three useful attributes: HeaderText
controls the text for the header row, Text
controls the text to be displayed for each row, and CommandName allows you to specify a unique identifier for each
command

The “dgsuperheroes” DataGrid definition also
introduces the OnItemCommand attribute,
which names the event handler to be invoked when the user clicks on one of the
<asp:ButtonColumn> links. In this example, the event handler is named SuperHero_Details(),
and it uses the CommandName attribute
to differentiate between calls to “Show Details” and “Hide
Details” requests. Note the explicit casting of the event (passed as the
input parameter to the event handler) as a LinkButton.

Share your own DataGrid tips and tricks

Over the course of this two-part article, I’ve tried to give
you some insight into the many things you can do with ASP.NET’s very cool
DataGrid control. In addition to showing you how to add column sorting to your
grid with minimum fuss, I also gave you a rapid introduction to three useful
but complicated properties of the DataGrid control: the <asp:BoundColumn>
element, which binds DataGrid columns to specific table fields in the database;
the <asp:HyperLinkCommand> element, which inserts hyperlinks into the grid;
and the <asp:ButtonColumn> element, which facilitates the introduction of
custom commands into the grid. Now it’s your turn—share your favorite DataGrid
tip or trick in the Discussion Board.