Per Column Header Customisation

[Genocide]

I have a grid in which two sets of data are compared side-by-side.
The grid is skinned (Sunset by default).  What I would like is to set the background image of some columns headers to be different to that of the selected skin, so that the two data sets are visually more distinct.  I would prefer the background to also be gradient image , not a flat colour.

I was using different forecolours on the text, but this appears to be insufficient for my users.

Can anyone provide an example of how this could be done?

[Iana Tsolova]

Hello Genocide,

In order to achieve your goal, you can try setting the BackColor or CssClass properties in the HeaderStyle tag for the desired columns. For instance as below:

<telerik:GridBoundColumn DataField="OrderID" HeaderText="OrderID" UniqueName="OrderID">
    <HeaderStyle BackColor="AliceBlue" CssClass="myCustomHeader" />
</telerik:GridBoundColumn>

For more information on how to customize the RadGrid appearance, you can check the below articles:

http://www.telerik.com/help/aspnet-ajax/grd-understanding-html-css.html
http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html
http://www.telerik.com/help/aspnet-ajax/grddesignstylemanager.html


Greetings,
Iana
the Telerik team

[Genocide]

Perhaps I should have been a bit more specific, and said that I've already tried a few options.

1. Changed header ForeColor.  This was not distinct enough for users.
2. CssClass was changed to custom style, that set the background to an image sprite generated by the Telerik Visual Designer.  This is the best so far (see attached image), but leaves a few things out, namely the edges.  The size of the header can be changed, so I cannot create a fixed image with the borders included.

What I would love to see is something akin to the skinned columns visual appearance and behaviour, only with the effect of two skins in use on the same grid.  I'm sure that's asking a lot.

[Genocide]

Never mind.

I tweaked the CSS some more, and got something more than acceptable.

Results shown in attached image.

If anyone else cares to know, here is the CSS:

.oeRightHeader
{
  background-color: #feffa2!important;
  background: url('/images/rmSprite.png') 0 -407px ;
  font-weight:normal;
  border-left: solid 1px #CBCC80;
  border-right: solid 1px #FFFFEC;
  border-bottom: solid 1px #CBCC80;
}

[Genocide]

I forgot to mention that this technique works poorly in IE6 with static heders enabled, with the different coloured headers having different widths to the data rows.

Not that IE6 pays much attention to column widths anyay, as all my columns are different to that set in the design. 

[Iana Tsolova]

Hi Genocide,

You can get an existing grid Skin css files and see how the issue in IE6 is solved there. For more information on the RadGrid Skins, you can check out the below aricles:

http://www.telerik.com/help/aspnet-ajax/grd-understanding-html-css.html
http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

Greetings,
Iana
the Telerik team