Using Data Grids in Web Applications

As you know, you use a data grid to display an entire table, or selected columns from a table. You can see a data grid at work in Figure 23.2. Web server data grids are much like Windows forms data grids, but there are differences. A Web server data grid uses an HTML table to display its data, for example. And different column types determine the behavior of the columns in the control. Here are the different column types that can be used:

BoundColumn— Shows a column bound to a field in a data source (this is the default column type).
ButtonColumn— Shows a button for each item in the column.
EditCommandColumn— Shows a column with editing commands for each item.
HyperLinkColumn— Shows a hyperlink for each item.
TemplateColumn— Shows each item using a given template.

By default, the AutoGenerateColumns property is set to True in data grids, which means the control will create a column for each field in the data table; each field is displayed as a column in the data grid in the order that it appears in the table. You can customize which columns appear in the DataGrid control by setting the AutoGenerateColumns property to False and adding the columns you want to display to the data grid's Columns collection (for an example of this, see "Creating Master/Detail Web Forms" in the Immediate Solutions section of this chapter).

You also can customize the appearance of a data grid by setting various style properties:

AlternatingItemStyle— Sets the style for alternating items.
EditItemStyle— Sets the style for the item being edited.
FooterStyle— Sets the style for the footer.
HeaderStyle— Sets the style for the header.
ItemStyle— Sets the style for the items.
PagerStyle— Sets the style for page selections.
SelectedItemStyle— Sets the style for selected items.

In fact, you can even customize the appearance of a data grid by adding HTML attributes to the <td> and <tr> elements used by this control in code. You can set those attributes by adding code to the event handler for the OnItemCreated or OnItemDataBound event. For example, to add an attribute to an <td> cell, you first need to get a TableCell object corresponding to that cell. You do that with the Item property of the event argument object passed to you in the event handler, and then using the Controls collection of the item. Then you use the Add method of the Attributes collection of the TableCell object to add attributes to the cell.