[Solved] Header BackColor DetailView Not Changing?

[Stuart]

Hi Everyone
I Have been trying to set header backcolour (to black) and the coloumn headings white to contrast. I have tried various things, but the header backcolour will not change it seesm to be the same as the MasterTableview, a light grey, the forecolour in the detail view changes, as does the backcolour in the detailview but not the header.  Any suggestions would be great.  Thanks

<telerik:RadGrid ID="gvDefleetCapIds" runat="server" AllowSorting="True"
                    AutoGenerateColumns="False" CellSpacing="0" Font-Names="Verdana"
                    Font-Size="X-Small" GridLines="None"
                    ondetailtabledatabind="gvDefleetCapIds_DetailTableDataBind"
                    oneditcommand="gvDefleetCapIds_EditCommand"
                    onitemcommand="gvDefleetCapIds_ItemCommand"
                    onneeddatasource="gvDefleetCapIds_NeedDataSource"
                    onupdatecommand="gvDefleetCapIds_UpdateCommand" Width="1200px"
                    AllowPaging="True" PageSize="30" AllowCustomPaging="True">
                    <headercontextmenu cssclass="GridContextMenu GridContextMenu_Default">
                    </headercontextmenu>
                    <mastertableview autogeneratecolumns="False" cellspacing="0"
                        datakeynames="CapID,Year,Plate" font-names="Verdana" font-size="X-Small">
                        <DetailTables>
                            <telerik:GridTableView AutoGenerateColumns="False"
                                DataKeyNames="RegNumber" Font-Names="Verdana" Font-Size="X-Small"
                                Name="TheVehicles"  ShowFooter="true" >
                                <HeaderStyle ForeColor="White" BackColor="Black"
                                    HorizontalAlign="Justify" />

[Princy]

Hello Stuart,

Try setting the CSS as shown below to set back color for DetailView. Hope this helps.

aspx:

<telerik:GridTableView AutoGenerateColumns="false" DataSourceID="SqlDataSource2" >
    <HeaderStyle CssClass="Detail1" />
 </telerik:GridTableView>

CSS:

   .Detail1
     {
       background-color:Black!important;
     }

Thanks,
Princy.

[Stuart]

Hi Princy

Tried the Css class, still no change from the "grey"  :(

Thanks
Stuart

[Tsvetina]

Hi Stuart,

You can try the following CSS in order to change th background color of the header. The problem in the other approach was that it is not removing the background image used by some of the grid built-in skins.

<style type="text/css">
    div.RadGrid_SkinName .rgHeader, div.RadGrid_SkinName th.rgResizeCol
    {
        background: Black;
    }
    <!-- if you need to change the font color -->
    div.RadGrid_SkinName .rgHeader, div.RadGrid_SkinName .rgHeader a
    {
        color: White;
    }
</style>

(replace "SkinName" with the name of the skin used by the grid)

Let us know in case the problem persists after you try this.

Best wishes,
Tsvetina
the Telerik team

[Srividhya]

Is this issue still there? Headerstyle back color seems to be not working properly . I tried both 

HeaderStyle-BackColor="#efbc6a" 

HeaderStyle-CssClass="HeaderStyle"

and  <HeaderStyle CssClass="HeaderStyle" /> It still gets the background color from the inheritance. 

Only when using HeaderStyle-BackColor="#efbc6a"  i see a very think line of the color i want in the bottom edge above the border. 

What am i doing wrong?

 

When using 

[Srividhya]

Here is the screen shot

[Eyup]

Hi Srividhya,

You need also to remove the background-image of the header row:

<HeaderStyle CssClass="HeaderStyle" />

CSS:

<style>
    div.RadGrid th.HeaderStyle {
        background: none no-repeat #efbc6a;
        border: none;
        color: black;
    }
</style>

Hope this helps. Please give it a try and let me know if it works for you.

Regards,
Eyup
Telerik