RadGrid header initial color wrong but MouseOver color correct

[Randall]

Hello,

I have RadControls for ASP.NET AJAX v2008.1.619.

I have a RadGrid with 3 visible columns and am using the Sunset skin.  The header text forecolor should be white and when moused-over should be a brownish color.  The header text color on columns 1 and 2 are wrong (the brownish color) but the header text color on column 3 is correct (white).  I used View Source and noticed that columns 1 and 2 are rendering with the <span> tag but column 3 is rendering as an anchor <A> tag.

Any idea why this is happening and how to fix it?

Thanks,

Randall Price

[Dimo]

Hello Randall,

The HTML output inside the RadGrid header cells depends on the control declaration and features used. For example if sorting is enabled, the header cells contain <a> elements.

If you want to have <a>'s in all header cells, please enable sorting for all of them, or use HeaderTemplates.

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Randall]

Hello Dimo,

I do have sorting enabled for all columns in the RadGrid.  Here is the rendered output from View Source for the column headers where you can see that the first two visible columns with text are rendered as <span> and the third visible columns is rendered as <a>:

<tr>
    <th scope="col" class="GridHeader_Sunset">&nbsp;</th>
    <th scope="col" class="GridHeader_Sunset" style="text-align:center;"><span title="Click here to sort" onclick="javascript:__doPostBack('RadGrid1$ctl00$ctl02$ctl01$ctl00','')" style="cursor:pointer;">Index</span></th>
    <th scope="col" class="GridHeader_Sunset" style="text-align:center;"><span title="Click here to sort" onclick="javascript:__doPostBack('RadGrid1$ctl00$ctl02$ctl01$ctl01','')" style="cursor:pointer;">Initiative</span></th>
    <th scope="col" class="GridHeader_Sunset" style="text-align:center;"><a title="Click here to sort" href="javascript:__doPostBack('RadGrid1$ctl00$ctl02$ctl01$ctl02','')">Responsible Area</a></th>
    <th scope="col" class="GridHeader_Sunset">&nbsp;</th>
</tr>

I also noticed that the same code renders the column header text forecolor properly in an ASP.NET page, but when I put it on a SharePoint .ASPX page, the column header text forecolor works.  I suspect that I have some CSS affecting the <span> tag on my SharePoint site.  That would explain the color differences, but not why columns 1 and 2 are rendered as <span> and column 3 is rendered as <a>.

I suppose I could try a HeaderTemplate but I am would like to know what is causing this difference in rendering.

Any more thoughts on this?

Thanks,

Randall Price

[Dimo]

Hi Randall,

I suppose that you have set HeaderButtonType="TextButton" for the columns with <span>'s inside the header cells? The default is LinkButton.

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Randall]

Hello Dimo,

This was exactly the problem.  I had HeaderButtonType="TextButton" in the GridBoundColumn tags for the first two visible columns and not in the 3rd visible column.  When I removed the HeaderButtonType attribute, the colors rendered correctly.

Thanks for this great help!

Randall Price

[Randall]

Hello Dimo,

This was exactly the problem.  I had HeaderButtonType="TextButton" in the GridBoundColumn tags for the first two visible columns and not in the 3rd visible column.  When I removed the HeaderButtonType attribute, the colors rendered correctly.

Thanks for this great help!

Randall Price