Could you please inform us about how you set the styling of your column header?

I suspect that the way you set the column header style is not correct.

<ISWebGrid:WebGridColumn Caption="<div style='font-family:Comic Sans MS'>CustomerID</div>"
    DataMember="CustomerID" Name="CustomerID" Width="100px">
</ISWebGrid:WebGridColumn>

Please try to set the column header style by using “declarative way” or “server side code way” (as shown below).

declarative way

<LayoutSettings AllowContextMenu="True" AllowSelectColumns="Yes">
    <HeaderStyle Font-Names="Comic Sans MS" Font-Size="8pt" />
</LayoutSettings>

or server side code way

protected void WebGrid1_InitializeLayout(object sender, ISNet.WebUI.WebGrid.LayoutEventArgs e)
{
    WebGrid1.LayoutSettings.HeaderStyle.Font.Name = "Comic Sans MS";
    WebGrid1.LayoutSettings.HeaderStyle.Font.Size = FontUnit.Point(8);
}

Hope this help.

Yudi,

When we initially started trying to style the column headers this was the way I attempted to modify the styling the way that you're suggesting on the server side.  For some reason I was never able to see any effect.  I was able to influence the headers' background color, the borders, anything, but not the font styling. I can even set the bold/italic/underline on the server side through code - everything but the font name and size.  I don't know if it's the SharePoint environment interfering, or some other factor, but in the end, the only thing that I was able to get working is setting the font style this way:

protected void WebGrid1_InitializeLayout(object sender, ISNet.WebUI.WebGrid.LayoutEventArgs e)
{
   WebGridColumn column = WebGrid1.RootTable.Columns.GetNamedItem('ColName');
   column.Caption = '<div style="font-family:Comic Sans MS;font-size:X-Small;">ColName</div>';
}

I'm not really sure what the problem is, but I've spent way too much time trying to set it the easy and 'pretty' way.  I put the setting just about everywhere I could on the server side, and I never saw ANY effect, except when I finally went directly to the column's .Caption property.

So if there's any javascript workaround that I can use to control the text that's displayed in the Selected Columns menu, that would be great..

Hi Dasha,

I don't really recommend the way to use html in the Caption as it could cause issue when used with other features such as Select Columns, or other features that rely on Caption to draw the User Interface.

If possible, try to isolate your scenario and investigate why the styles failed to render in your SharePoint page.

In any chances, this code should work, try the following setting:

<HeaderStyle CustomRules="font-family:Comic Sans MS!important;font-size:X-Small!important;" />

That will ensure the specified styles are attached to the header without getting override from other aspects. 

Hope this helps,
James.

Thank you, Yudi, this last suggestion with the "!important" statement worked.

Thank you, Yudi, this last suggestion with the "!important" statement worked.

You are very welcome, but I guess that your compliment should be addressed to “James”.
Glad to hear that James’s suggestion worked.

Thank you for your contribution, James.