Header BackColor DetailView Not Changing?

7 posts, 0 answers
  1. Stuart
    Stuart avatar
    21 posts
    Member since:
    Jan 2011

    Posted 14 Jun 2011 Link to this post

    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" 
                        onupdatecommand="gvDefleetCapIds_UpdateCommand" Width="1200px" 
                        AllowPaging="True" PageSize="30" AllowCustomPaging="True">
                        <headercontextmenu cssclass="GridContextMenu GridContextMenu_Default">
                        <mastertableview autogeneratecolumns="False" cellspacing="0" 
                            datakeynames="CapID,Year,Plate" font-names="Verdana" font-size="X-Small">
                                <telerik:GridTableView AutoGenerateColumns="False" 
                                    DataKeyNames="RegNumber" Font-Names="Verdana" Font-Size="X-Small" 
                                    Name="TheVehicles"  ShowFooter="true" >
                                    <HeaderStyle ForeColor="White" BackColor="Black"
                                        HorizontalAlign="Justify" />

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 15 Jun 2011 Link to this post

    Hello Stuart,

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

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


  3. Stuart
    Stuart avatar
    21 posts
    Member since:
    Jan 2011

    Posted 15 Jun 2011 Link to this post

    Hi Princy

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

  4. Tsvetina
    Tsvetina avatar
    2102 posts

    Posted 15 Jun 2011 Link to this post

    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;
    (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,
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  5. Srividhya
    Srividhya avatar
    2 posts
    Member since:
    Aug 2011

    Posted 02 Dec 2015 in reply to Princy Link to this post

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



    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 

  6. Srividhya
    Srividhya avatar
    2 posts
    Member since:
    Aug 2011

    Posted 02 Dec 2015 in reply to Srividhya Link to this post

    Here is the screen shot
  7. Eyup
    Eyup avatar
    3322 posts

    Posted 07 Dec 2015 Link to this post

    Hi Srividhya,

    You need also to remove the background-image of the header row:
    <HeaderStyle CssClass="HeaderStyle" />
        div.RadGrid th.HeaderStyle {
            background: none no-repeat #efbc6a;
            border: none;
            color: black;

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

    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 Feedback Portal and vote to affect the priority of the items
Back to Top