This is a migrated thread and some comments may be shown as answers.

Per Column Header Customisation

5 Answers 48 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Genocide
Top achievements
Rank 2
Genocide asked on 12 Aug 2010, 06:21 AM
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?

5 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 17 Aug 2010, 12:53 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Genocide
Top achievements
Rank 2
answered on 18 Aug 2010, 01:23 AM
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.

0
Genocide
Top achievements
Rank 2
answered on 18 Aug 2010, 01:48 AM
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;
}
0
Genocide
Top achievements
Rank 2
answered on 26 Aug 2010, 04:47 AM
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. 
0
Accepted
Iana Tsolova
Telerik team
answered on 30 Aug 2010, 02:19 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Genocide
Top achievements
Rank 2
Answers by
Iana Tsolova
Telerik team
Genocide
Top achievements
Rank 2
Share this question
or