DataGrid header style inconsistent with sortable column style

Discussion in 'ASP .Net' started by cedoucette@alum.rpi.edu, Oct 14, 2005.

  1. Guest

    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>
    , Oct 14, 2005
    #1
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?RGlmZmlkZW50?=

    Setting CSSClass for Datagrid header's for sortable fields

    =?Utf-8?B?RGlmZmlkZW50?=, Dec 22, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    1,601
    =?Utf-8?B?QmlsbCBCb3Jn?=
    Dec 23, 2004
  2. =?Utf-8?B?VFBoZWxwcw==?=

    Sortable/pagable datagrid with hyperlink column

    =?Utf-8?B?VFBoZWxwcw==?=, Dec 29, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    4,713
    Steven Cheng[MSFT]
    Jan 3, 2006
  3. tonicvodka
    Replies:
    0
    Views:
    338
    tonicvodka
    Jan 18, 2006
  4. hansiman

    Image in header column (not replacing column header text)

    hansiman, Feb 5, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    3
    Views:
    294
    hansiman
    Feb 7, 2004
  5. Teej
    Replies:
    2
    Views:
    294
Loading...

Share This Page