ASP.NET Datagrid: how to style?

Question

Can someone tell me how to do styling for an asp.net datagrid control. I have the following requirements. I want to know for what properties these style classes will apply.

1. The title bar should have a border above and below. Without left and right borders. 2. Want to have a line separator between each column in the title bar. Not required for Left and Right.LEt to be opened 3. You need to apply different styles for each column value. How to mention different classes for different columns?

I am looking for asolution that displays in allbrowsers with the same effect

Answer 1

You can add a section to the <asp:DataGrid> as follows:

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

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

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

I think you would be better off with the second approach. I am having problems with some styles of the <HeaderStyle> tag that do not apply when they are only under the <asp:DataGrid> .

If you want to transfer the same style to other DataGrids, you can create a skin so that the header style is the same everywhere.

Answer 2

Check out the 4guysfromrolla.com series of articles on ASP.NET DataGrids. Part 2 talks about styling DataGrids.

Answer 3

The DataGrid and DataTable controls display tables. So use CSS:

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

There are many elements to target.

... Here is some 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; } 

Answer 4

Use the CssClass property of the grid to give the table a css class. To get different behavior from the start and end elements, also apply the class to the column heading and cells. Then use CSS to style the table elements. 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} 

You do not need to use ASP.NET styles, mainly because you can get a lot of slicker with CSS and not have bloated code.