asked on

datagrid css formatting

I wasn't sure which area this question was best suited for, so I apologize if the question topic should be posted under css.

I'm just getting a handle on how to use the cssClass attribute with the datagrid and trying to find the cleanest method to format the datagrid.

I'm trying to get a better understanding of how I can format a datagrid using css.

For example, in the following datagrid I have set the cssclass attributes:

<asp:DataGrid id="DataGrid_Titles" runat="server" AutoGenerateColumns="False" CssClass="tblTitles">
<Columns>
<asp:BoundColumn DataField="title" HeaderText="Book Title"></asp:BoundColumn>
<asp:BoundColumn DataField="type" HeaderText="Category"></asp:BoundColumn>
<asp:BoundColumn DataField="price" HeaderText="Price"></asp:BoundColumn>
</Columns>
<HeaderStyle CssClass="tblheader"></HeaderStyle>
<AlternatingItemStyle CssClass="tblrows"></AlternatingItemStyle>
/asp:DataGrid>

Here are the styles:

body {text-align:center;}
.tblTitles {border-collapse:collapse;border:1px solid #CCCCCC;margin:0 auto 0 auto;}
.tblTitles {border-collapse:collapse;border: 1px solid #CCCCCC;}
.tblHeader {background-color: #ddddee;}
.tblrows {background-color: #ccddee;}

Is there a better method to set the formatting for the datagrid? What I was curious about is if I can change the output of the html for the HeaderStyle to the <th> tag? Instead of using a class for the table, how can I change it to an id?

So, I could change the styles to:
#tblTitles {border-collapse:collapse;border:1px solid #CCCCCC;margin:0 auto 0 auto;}
#tblTitle th {....}
#tblTitle td {...}

I assume I would still have to define a specific class for the AlternatingItemStyle?

Any suggestions and help would be appreciated.
Regards,
-D-

-Dman100-

ASKER

Let me re-phrase my question.

Is there a way to get the HeaderStyle tag within the datagrid to output in
the html as a <th> tag?

So, when I create my styles for the datagrid table I can use the following:

#IDofDatagrid {contains the overall formatting for the html table generated}
#IDofDatagrid th {contains the formatting just for the header section}
#IDofDatagrid td {contains the formating for the content section}

I assume I would have to use a class for the AlternatingItemStyle tag within
the datagrid if I want to have a different background color for the
alternating rows of the datagrid?

<AlternatingItemStyle CssClass="mystyle"></AlternatingItemStyle>

.mystyle {background-color: somecolor;}

sorry if the question in my first post wasn't clear.

Hope this explains better.
Thanks,
-D-

dynamicrevolutions

u can use javascript to "move" first row to a newly created <TH>

<table id="x">
<tr><td>1</tr>
<tr><td>2</tr>
<tr><td>3</tr>
</table>

<script type="text/javascript">
var tbl = document.getElementById('x')
var header = .getElementsByTagName('tr')[0]
var th = document.createElement('th')
th.appendChild(header)
tbl.insertBefore(th,tbl.getElementsByTagName('tbody')[0])
</script>

ASKER CERTIFIED SOLUTION

samtran0331

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial