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?
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
0
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:
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
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.
- Changed header ForeColor. This was not distinct enough for users.
- 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:
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.
Not that IE6 pays much attention to column widths anyay, as all my columns are different to that set in the design.
0
Accepted
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
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