ASP.NET Datagrid : How to style ?

Question

Can any one tell me how to do styling for an asp.net datagrid control.I have the following requirements. I want to know to which proprties these style classes to be applied

1 . Header Row should have border in top and bottom.No Left and Right borders. 2 . Want to have a line seperator between each column in the header row.Not needed for Left and Right.LEt that be open 3 .Need to apply different styles for each column values.How to mention various classes for different columns ?

I am searching for a asolution which renders in allbrowsers with same effect

Answer 1

You can add a section in the <asp:DataGrid> tag like this:

<HeaderStyle Font-Bold="True" HorizontalAlign="Center" VerticalAlign="Top" BackColor="SaddleBrown" ForeColor="Ivory" />

Or you can set the style in the column templates ike this:

<asp:BoundColumn HeaderText="Account Number"
DataField="AccountNumber" ReadOnly="True"
HeaderStyle-Font-Bold="True" HeaderStyle-HorizontalAlign="Center"
ItemStyle-HorizontalAlign="Left"></asp:BoundColumn>

I think that you will have better luck with the second approach. I have encountered problems with some of the <HeaderStyle> tag styles not being applied when it's only under the <asp:DataGrid> tag.

If you want to carry the same style over to other DataGrids, you can create a skin so you'll have the same header style everywhere.

Answer 2

Check out the 4guysfromrolla.com article series on ASP.net DataGrids. Part 2 talks about styling DataGrids.

Answer 3

Use the CssClass property of the grid to give the table a css class. To get different behavior out of the leading and ending elements also apply a class to the column header and cells. Then use CSS to style the elements of the table. IE:

ASPX:

<asp:DataGrid CssClass="grid" . . . .
<asp:BoundColumn HeaderClass = "first" ItemClass = "first" . . . .
(other columns)
<asp:BoundColumn HeaderClass = "last" ItemClass = "last" . . .

CSS:

table.grid th { border: solid 1px black}
table.grid th.first {border-left: 0px}
table.grid th.last {border-right: 0px}

No need to use the ASP.NET styles, mainly because you can get much slicker with CSS and not have bloated code.

Answer 4

The DataGrid and DataTable controls renders out tables. So use CSS:

table { ... }
thead { ... }
tbody { ... }
tfoot { ... }
tr { ... }
td { ... }
th { ... }

There's plenty of elements to target.

... Here's a bit of code to get you started:

/* target table-rows in the header element of a table and modify border-styles */
thead tr {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}