More on the ASP.NET DataGrid control

The ASP.NET DataGrid control can do a lot more than just spit out a plain HTML table. We'll show you some tricks to spruce up the output from this powerful tool.

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.

Editor's Picks