Click here to Skip to main content
Click here to Skip to main content
Go to top

Add some Style to your DataGrids

, 5 Jul 2004
Rate this:
Please Sign up or sign in to vote.
Use CSS style sheets to apply re-usable styles across all of your grids.

Sample Image - cssgrid.gif

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Steven Campbell
Web Developer
United States United States
Steve is a software developer working in Minneapolis, MN.

Comments and Discussions

 
Questionthank you for sharing, its work Pinmembersug1anto7-Aug-13 16:05 
QuestionNeed Help UNICODE PinmemberNazim Iqbal5-Oct-12 13:37 
QuestionTHANK YOU PinmemberMember 835054427-Oct-11 1:39 
Generalpager arrow Pinmembervsnewcomer8-Apr-10 1:06 
QuestionProblem using this with "DatagridFixedHeader" Pinmembersmcirish22-Apr-08 8:04 
GeneralRe: Problem using this with "DatagridFixedHeader" PinmemberSteven Campbell22-Apr-08 15:18 
GeneralThank you Pinmemberjrl237@yahoo.com12-Jun-07 6:53 
GeneralControlling Header borders Pinmemberiburge5-Apr-05 6:23 
GeneralPaging specific Properties PinsussAbinash Patra31-Mar-05 16:51 
GeneralRe: Paging specific Properties PinmemberSteven Campbell1-Apr-05 2:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 6 Jul 2004
Article Copyright 2004 by Steven Campbell
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid