CODEWITHSUNDEEP
asp.net
Shyju
Shyju

Reputation: 218862

ASP.NET Datagrid : How to style?

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

Upvotes: 4

Views: 10709

Answers (4)

Wyatt Barnett
Wyatt Barnett

Reputation: 15663

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.

Upvotes: -1

cllpse
cllpse

Reputation: 21727

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;
}

Upvotes: 1

Jeremy Sullivan
Jeremy Sullivan

Reputation: 1005

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

Upvotes: 2

DOK
DOK

Reputation: 32851

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.

Upvotes: 3

Related Questions