Unable to Set Background Color of Header

[Robert]

Here's the initial portion of a RadGrid I've defined:

<telerik:RadGrid ID="radGrid" runat="server" AutoGenerateColumns="false" Width="100%" BorderWidth="0" <br>                 CellPadding="0" GridLines="Vertical" Font-Size="11px" OnItemDataBound="radGrid_ItemDataBound"><br>  <MasterTableView BorderWidth="0"><br>    <HeaderStyle BackColor="#bcd0fe" Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Top" /><br>

The BackColor property appears to have no effect.  Is this a known bug with RadGrid or is there another way I'm supposed to set the background color of the Header?

Robert

[Jayesh Goyani]

Hello,

Please try with below code snippet.

<style type="text/css">
        .Myheader
        {
            background-color:Red !important;
            background-image:none !important;
        }
    </style>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnItemDataBound="RadGrid1_ItemDataBound"
            OnNeedDataSource="RadGrid1_NeedDataSource">
            <HeaderStyle CssClass="Myheader" />
.......
......

Thanks,
Jayesh Goyani

[Robert]

Thank you, Jayesh.  That fixed it!  However I think that Telerik should consider this issue to be a bug.  I realize that there's probably some convoluted technical explanation of why setting the "BackColor" property doesn't set the Background Color but it should.  Period.

Ancillary question: I've notice that the header is somewhat taller than I'd ideally like.  I've tried changing the Height property but it has no effect.  Any ideas?

[Robert]

Update: I just solved the RadGrid Header height issue by following Jayesh's guidance and adding these two lines to the CSS entry:

    padding-top:2px !important;
    padding-bottom:2px !important;

Now the RadGrid Header height is identical to the default height of Microsoft's GridView Header.  This makes things more visually compatible when you have both controls appearing on the same screen!

[Robert]

I'm now trying to shrink the height of the non-header grid rows using the approach outlined earlier.  But it's not working.

Might anyone have any ideas?

Robert

[Robert]

Finally figured it out:

div.RadGrid .rgRow td
{
  padding-top:0;
  padding-bottom:0;
}

div.RadGrid .rgAltRow td
{
  padding-top:0;
  padding-bottom:0;
}

[Peter]

Agree - if setting <HeaderStyle BackColor="[X]"doesn't do anything, then it's a bug. 

[Maria Ilieva]

Hi Peter,

Note that in the most skins of RadGrid control we are loading background images and settings back color this way will not give any effect in this case. The mentioned property can be used for skins that are not loading background images, like the Metro skin for example.

Regards,
Maria Ilieva
Telerik