DataGrid header style inconsistent with sortable column style

C

cedoucette

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('PrescriptionLibrary1$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('PrescriptionLibrary1$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('PrescriptionLibrary1$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('PrescriptionLibrary1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl3','')"><font
color="White">Status</font></a></font></td><td width="7%"><font
face="helvetica" color="White"><a
href="javascript:__doPostBack('PrescriptionLibrary1$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('PrescriptionLibrary1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl0','')"
style="color:White;">Prescription Formula</a></td><td
style="width:15%;"><a
href="javascript:__doPostBack('PrescriptionLibrary1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl1','')"
style="color:White;">Patient Name</a></td><td style="width:10%;"><a
href="javascript:__doPostBack('PrescriptionLibrary1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl2','')"
style="color:White;">Date Entered</a></td><td style="width:7%;"><a
href="javascript:__doPostBack('PrescriptionLibrary1$PrescriptionGrid1$dgPrescriptions$_ctl1$_ctl3','')"
style="color:White;">Status</a></td><td style="width:7%;"><a
href="javascript:__doPostBack('PrescriptionLibrary1$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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top