Using CSS to control DataGrids

[Bryon Brewer]

Hi,

I use DataGrids throughout my entire application -- to maintain a
consistent look to all datagrids, I am using a stylesheet to define
the look/feel. For those interested, it is a little bit of a
challenge since the datagrid is really rendered as an HTML table with
many different tags. Below is the code:

Stylesheet
===========
..NormalGrid
{
padding: 4;
background-color: white;
font-size: 10pt;
font-family: Arial;
border-color: #3366CC;
}
/** If you want to control the gridlines, you need this next style **/
..NormalGrid TD
{
padding: 2;
border-color: #3366CC;
}
..NormalHeader
{
font-weight: bold;
color: white;
background-color: #5169b3;
}
/** If you using sorting in your grid, you need these to control the
links **/
..NormalHeader A:link
{
color: white;
}
..NormalHeader A:active
{
color: white;
}
..NormalHeader A:hover
{
color: white;
}
..NormalHeader A:visited
{
color: white;
}
..NormalItem
{
color: #003399;
background-color: White;
}
..NormalSelectedItem
{
font-weight: bold;
color: #FFFFFF;
background-color: #009999;
}
..NormalAlternatingItem
{
background-color: gainsboro;
color: #003399;
}
..NormalFooter
{
color: #003399;
background-color: #99CCCC;
}
..NormalPager
{
color: #003399;
background-color: #99CCCC;
}

In your Web Control (aspx) file, use something like:
======================================================

<ASPATAGRID cssclass="NormalGrid">
<SELECTEDITEMSTYLE cssclass="NormalSelectedItem"></SELECTEDITEMSTYLE>
<ALTERNATINGITEMSTYLE
cssclass="NormalAlternatingItem"></ALTERNATINGITEMSTYLE>
<ITEMSTYLE cssclass="NormalItem"></ITEMSTYLE>
<HEADERSTYLE cssclass="NormalHeader"></HEADERSTYLE>
<FOOTERSTYLE cssclass="NormalFooter"></FOOTERSTYLE>
<PAGERSTYLE cssclass="NormalPager" mode="NextPrev"></PAGERSTYLE>
<columns>
...... your columns here....
</columns>
</asp:datagrid>

That will allow you to control all elements in CSS that you can
control through the normal DataGrid control.

Bryon