Formatting sorted header column in gridview

[Webskater]

I have a gridview with sorting implement. Here is a bit of the code.

                   <asp:GridView ID="gvDetails" runat="server" DataKeyNames="SSID" AutoGenerateColumns="False"
                        Width="100%" CssClass="GridHeadDisplay" OnRowDeleting="gvSSDetails_RowDeleting"
                        AllowSorting="true" OnSorting="gvSSDetails_Sorting" OnRowDataBound="gvSSDetails_RowDataBound">
                        <RowStyle CssClass="GridItemDisplay" />
                        <EmptyDataTemplate>
                            <asp:Label ID="Label1" runat="server">
                                    <font style="font-size: 10pt; font-family: Tahoma;" >No records Found</font>
                            </asp:Label>
                        </EmptyDataTemplate>
                        <Columns>
                            <asp:BoundField  DataField="OrganisationID" HeaderText="OrganisationID" Visible="False" />
                            <asp:TemplateField HeaderText="Organisation" SortExpression="OrgName">

The grid has 4 columns. 2 of them you can sort on. But the text in those two column headers - that you click on to sort - is being formatted to look like a hyperlink. This formatting is not done by me - it seems to be happening itself.

The whole header row is formatted by CssClass="GridHeadDisplay" - so I have a row with blue backgrounds to the cells with white text in them - apart from the two that you can sort on that look like the standard blue, underlined hyperlinks.

How can I make the text in the two column header cells you can sort on look the same as the text in the other columns?

Thanks for any help.

[bebandit]

Try setting this attribute in the gridview tag:

HeaderStyle-CssClass="YourHeaderCSSclass"

like this:

<asp:GridView I
D="gvDetails"
runat="server"
DataKeyNames="SSID"
AutoGenerateColumns="False"
Width="100%"
CssClass="GridHeadDisplay"
OnRowDeleting="gvSSDetails_RowDeleting"
AllowSorting="true" OnSorting="gvSSDetails_Sorting" OnRowDataBound="gvSSDetails_RowDataBound"
HeaderStyle-CssClass="YourHeaderCSSclass"
>

[Xiard]

I'm having a similar problem. I'm fairly certain that setting the HeaderStyle doesn't actually apply in this case. If I set HeaderStyle to something like "gridViewHeader", the generated HTML looks something like:

<tr class="gridViewHeader">
<th scope="col">
<a href="javascript:__doPostBack(...snip...)">Last Name</a>
</th>
...snip...

The gridViewHeader class doesn't affect the style for the anchor tag. Here's what my gridViewHeader style looks like:

.gridViewHeader
{
background-color:#C0C0FF;
color:Navy;
}

The resulting text is not Navy. I tried adding these styles as well:

A.GridViewHeader:link
{
color: Navy;
}
A.GridViewHeader:visited {
color: Navy;
}
A.GridViewHeader:active {
color: Navy;
}
A.GridViewHeader:hover {
color: Navy;
}

That didn't do any good either. I also hooked OnRowDataBound for the gridview, and checked the cells in the DataControlRowType.Header row. I didn't see the anchor tag equivalent (Hyperlink control, I believe) in there, so I couldn't set the CssClass for the anchor tag that way.

Does anyone have any more suggestions?

Thanks,

David

[Xiard]

Hah! Found it. Obviously I need to learn more about CSS. I was on the right track in my previous post. This is what I needed, though:

.GridViewHeader A:link
{
color: Navy;
}
.GridViewHeader A:visited {
color: Navy;
}
.GridViewHeader A:active {
color: Navy;
}
.GridViewHeader A:hover {
color: Navy;
}

Now my header looks like I want.

David

[SeanGrebey]

This is an old thread but this doesn't work for me at all has this changed?

[KGComputers]

I have posted a solution to your thread on Changing Link Color.