Add some Style to your DataGrids

• Download source files - 17 Kb

Introduction

It can be frustrating trying to apply CSS styles to .NET data grids - attempting to blindly apply styles does not usually work as expected, because of the way that the DataGrid is rendered to the browser. This article introduces some simple techniques to help get you started.

But first, why use styles at all? You could use the autoformat feature in Visual Studio .NET, but what happens when the "UI expert consultant" that your boss hired insists on extra spacing between the rows? You'll have to go to every grid on your project, and edit it. Using styles lets you control the appearance of all of your grids from a single place.

DataGrid styles

The DataGrid exposes several places where it is easy to assign a style, using the CssStyle property. They are:

• <asp:datagrid> - this corresponds to an HTML table element. You can use this style to set some global properties for the grid, such as the background color, or the border.
• <HeaderStyle> - this controls the header row, but the style is applied to the HTML <tr> element. Interestingly, ASP.NET renders the table header cells as <td>, not <th>. Naughty Microsoft, abusing web standards again!
• <ItemStyle> - this controls formatting for each item. The style is applied to the HTML <tr> element for the odd rows.
• <AlternatingItemStyle> - controls formatting for alternate (even) items. Also applied to the <tr> element.
• <SelectedItemStyle> - applied to a highlighted row.
• <FooterStyle> - applied to a footer row, e.g., a summary row.
• <PagerStyle> - applied to a pager row.

I will not use all of these styles in my examples, because they are not necessary to show how to do it.

<asp:datagrid>

In my example, I have set up the DataGrid like this:

<asp:datagrid id="DataGrid1" runat="server" CssClass="Grid">
    <HeaderStyle CssClass="GridHeader"></HeaderStyle>
    <ItemStyle CssClass="GridItem"></ItemStyle>
    <AlternatingItemStyle CssClass="GridAltItem"></AlternatingItemStyle>
</asp:datagrid>

I applied a CssStyle of Grid to the asp:datagrid element, and various other styles to the other grid style elements. In my external style sheet, I used the following line, which creates a solid tan border, 1 pixel thick.

.Grid { border: solid 1px Tan; }

Applying a style class to the grid as a whole has other benefits as well - we can use that class to refer to sub-elements of the grid, like this:

.Grid td
{
    border: solid 3px #FFFFFF;
    margin: 3px 3px 3px 3px;
    font-family: Arial;
    padding: 5px 5px 5px 5px;
    text-align: center;
}

The style above applies to all cells within the grid, since they are all <td> elements. It makes all the text Arial and centered, creates thick white gridlines, and inserts some padding and spacing between the cells.

<HeaderStyle>

Next, we move on to formatting the header row. This is fairly simple, using the GridHeader style that was applied to the <HeaderStyle> element.

.GridHeader
{
    font-weight: bold;
    background-color: Tan;
}

This works OK, until you create a sorted grid. Sorted grids have hyperlink tags for the header row. These hyperlinks do not take on the styles assigned so far. We can take care of that though:

.GridHeader a
{
    text-decoration: none;
    color: LightGoldenrodYellow;
    padding: 0px 15px 0px 15px;
}

The above takes care of the color and style of the hyperlink. The padding is not necessary, but I used it to illustrate some more advanced CSS, which is implemented in the following block:

.GridHeader a:hover
{
    text-decoration: underline;
    background: Tan url(images/spin.gif) no-repeat 0 100%;
}

The hover keyword is used to represent what happens when the mouse is moved over the link. In my case, I am underlining the hyperlink, and causing a small image to appear next to it. (This is why I created the 15px padding earlier; so that the image would have a place to go). The image is a spin button, which will hopefully indicate to the user what clicking the header will do.

<ItemStyle>, <AlternatingItemStyle>

Next, we want to set some attributes for the grid rows. In my case, I've decided to make the row font a little smaller, so that I can fit more data in my row.

.GridItem, .GridAltItem
{
    font-size: smaller;
}

Notice how I have applied the style to both the normal, and the alternating rows. Next, we apply styles to differentiate the alternating rows:

.GridItem
{
    background-color: LightGoldenrodYellow;
}

.GridAltItem
{
    background-color: PaleGoldenrod;
}

And that takes care of all of the basics.

Final Notes

The styles used here have been tested in IE6 and Mozilla FireFox 0.91. They will gracefully degrade on browsers that do not support some of the more advanced features, such as the hovering spin button.

The downloadable code includes multiple stylesheets. On FireFox, you can switch styles using the small icon on the lower left. In IE, you will have to edit the source to view the other styles.

References

• More Eric Meyer on CSS