By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,931 Members | 1,599 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,931 IT Pros & Developers. It's quick & easy.

DataGrid header style inconsistent with sortable column style

P: n/a
I just wrote code to support sortable columns in a datagrid.
It seems to work fine; but, it doesn't look right.
The problem is that I have a generic style for links
and a different style for the header row - and they conflict.
The sortable column apparently uses the generic style for <a>
elements and the rest of the header uses "headerRow".

Can anyone tell me how to get consistent styles for each column in
my datagrid header?

Thanks,
Chuck

Here are some of the details:

<asp:DataGrid id="dgPrescriptions" runat="server"
AutoGenerateColumns="False"
<HeaderStyle CssClass="headerRow"></HeaderStyle>

Here's an example of a sortable column:
<asp:BoundColumn HeaderText="Prescription Formula"
DataField="FormulaName" SortExpression="FormulaName"
HeaderStyle-Width="35%" ItemStyle-Width="35%"
FooterStyle-Width="35%"></asp:BoundColumn>

and a non-sortable column:
<asp:BoundColumn HeaderText="Grams per Dose"
DataField="GramsPerDose" ItemStyle-HorizontalAlign="Right"
DataFormatString="{0:F1}" HeaderStyle-Width="6%" ItemStyle-Width="6%"
FooterStyle-Width="6%"
HeaderStyle-HorizontalAlign="Right"></asp:BoundColumn>

and the relavant styles:

a
{
font-family: Times New Roman;
color: #336600;
}

..headerRow {
font-family: 'helvetica','Times New Roman','verdana','sans-serif';
font-weight : bold;
font-size: 10pt;
color: white;
background-color: #669933;
vertical-align: bottom;
}

I thought that adding a class specific style, "a.headerRow",
would help; but, apparently it didn't work:

a.headerRow
{
font-family: 'helvetica','Times New Roman','verdana','sans-serif';
color: White;
}

So, I attempted to override the font family and color in the
code-behind file:

me.dgPrescriptions.HeaderStyle.ForeColor = Color.White
' This is my attempt to last? attempt to override the style
for link elements
' used to implement the sortable column controls to match
the other header labels
me.dgPrescriptions.HeaderStyle.Font.Name = "helvetica"

Unfortunately, this doesn't seem to work either
(although it looks like it should).

Here's what was generated for Firefox:

<tr class="headerRow">
<td width="2%"><font face="helvetica"
color="White">&nbsp;</font></td><td width="35%"><font face="helvetica"
color="White"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl0',' ')"><font
color="White">Prescription Formula</font></a></font></td><td
width="15%"><font face="helvetica" color="White"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl1',' ')"><font
color="White">Patient Name</font></a></font></td><td width="10%"><font
face="helvetica" color="White"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl2',' ')"><font
color="White">Date Entered</font></a></font></td><td width="7%"><font
face="helvetica" color="White"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl3',' ')"><font
color="White">Status</font></a></font></td><td width="7%"><font
face="helvetica" color="White"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl4',' ')"><font
color="White">Encapsulated</font></a></font></td><td align="Right"
width="6%"><font face="helvetica" color="White">Grams per
Dose</font></td><td align="Right" width="6%"><font face="helvetica"
color="White">Doses per Day</font></td><td align="Right"
width="6%"><font face="helvetica" color="White">Number of
Days</font></td><td align="Right" width="6%"><font face="helvetica"
color="White">Total Grams</font></td>

</tr>

and here's what was generated for IE:

<tr class="headerRow" style="color:White;font-family:helvetica;">
<td style="width:2%;">&nbsp;</td><td style="width:35%;"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl0',' ')"
style="color:White;">Prescription Formula</a></td><td
style="width:15%;"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl1',' ')"
style="color:White;">Patient Name</a></td><td style="width:10%;"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl2',' ')"
style="color:White;">Date Entered</a></td><td style="width:7%;"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl3',' ')"
style="color:White;">Status</a></td><td style="width:7%;"><a
href="javascript:__doPostBack('PrescriptionLibrary 1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl4',' ')"
style="color:White;">Encapsulated</a></td><td align="Right"
style="width:6%;">Grams per Dose</td><td align="Right"
style="width:6%;">Doses per Day</td><td align="Right"
style="width:6%;">Number of Days</td><td align="Right"
style="width:6%;">Total Grams</td>
</tr>

Nov 19 '05 #1
Share this question for a faster answer!
Share on Google+

This discussion thread is closed

Replies have been disabled for this discussion.