467,882 Members | 1,151 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,882 developers. It's quick & easy.

DataGrid header style inconsistent with sortable column style

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
  • viewed: 2295
Share:

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Ben | last post: by
11 posts views Thread by rkbnair | last post: by
3 posts views Thread by Mortar | last post: by
3 posts views Thread by TPhelps | last post: by
reply views Thread by MrMoon | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.