Override Header Cell Color

[Derek]

I'm using a RadGrid with the theme Web20 and I'm having trouble changing the color for a specific cell in the RadGrid header. I noticed the header is using an image to create the gradient look, but I need to create the look of a spacer. I was able to accomplish this with the tree list, but I'm having issues doing this with the radgrid. See the pictures attached. 

I'm looking to do this in CSS on inline style or something that doesn't require a reference to System.Drawing in the VS project. Capture1.png below is the radgrid. Capture2.png is the treelist.

Thanks,

Derek

[Pablo]

Derek,

What you can do is the following is subscribe your grid to the itemcreate event and do the following:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{

            if(e.item.ItemType == GridItemType.Header) 

            {
                    //Change the background color of the header here
                    item.Style["background-color"] = "#b05a33";
                   
                    //Change the font if you would like
                  item.Style["color"] = "#FFFFFF";
                    item.Style["font-size"] = "9px";
             }            

 }

[Shinu]

Hello Derek,

Try the following CSS.
CSS:

<style type="text/css">
 .RadGrid_Web20 th.rgHeader
 {
  color:Red;
 }
</style>

-Shinu.

[Derek]

Thank you for your replies. I didn't have an issue changing the entire header, but I needed to do it for a specific column. I tried setting the HeaderStyle-CssClass, but the CSS change shows up behind the header theme. Any suggestions? I tried setting !important on the CSS and also tried setting z-index. Nothing helped.

[Derek]

Any other ideas?

[Galin]

Hi Derek,

You should set the CssClass to the specific column, e.g.:

<telerik:RadGrid ID="RadGrid1" runat="server" ...>
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn UniqueName="Custom1" HeaderStyle-CssClass="specificHeader"></telerik:GridBoundColumn>
  ......
  ......
  ......
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And use this CSS rule:

div.RadGrid .specificHeader
{
    background: #fff;
}

I hope it helps.

All the best,
Galin
the Telerik team

[Derek]

Thanks for your reply. That's the code that I have

aspx:

<telerik:GridTemplateColumn UniqueName="Spacer" HeaderStyle-Width="5px" 
	HeaderStyle-CssClass="RadGridSpacerCell" 
	ItemStyle-CssClass="RadGridSpacerCell" 
	HeaderStyle-BorderStyle="None" ItemStyle-BorderStyle="None" />

css:
div.RadGrid .RadGridSpacerCell
{
	background-color: #FFFFFF;
}
If you look at the picture that I showed in the first post (capture 1 I
believe) you can see the CSS is being picked up behind the image header,
I just can't get it to pick up in front. If there is no easy way around
this, then I don't want to do workaround for a styling issue.

[Galin]

Hello Derek,

You should override the background-image too. Therefore, you should use background property instead of background-color:

background: #fff;

Best wishes,
Galin
the Telerik team

[Derek]

Something so minor! Thank you all very much!

[Logan Marshall]

Yes! You've Saved that day!  I was just trying to override the "background-color" but the "background" css property needs changed too!  Genius.  I guess its a picture for the back ground for the source of rad grid/tree list column headers, for Web20 and Sunset for example?  Is that why you also need to change the background property?  Thanks Again!  Telerik You Rock!