This is a migrated thread and some comments may be shown as answers.

Header BackColor DetailView Not Changing?

6 Answers 106 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stuart
Top achievements
Rank 1
Stuart asked on 14 Jun 2011, 03:44 PM
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" />


6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 15 Jun 2011, 11:25 AM
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.
0
Stuart
Top achievements
Rank 1
answered on 15 Jun 2011, 02:21 PM
Hi Princy

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

Thanks
Stuart
0
Tsvetina
Telerik team
answered on 15 Jun 2011, 03:48 PM
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

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.

0
Srividhya
Top achievements
Rank 1
answered on 02 Dec 2015, 03:48 PM

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 

0
Srividhya
Top achievements
Rank 1
answered on 02 Dec 2015, 03:50 PM
Here is the screen shot
0
Eyup
Telerik team
answered on 07 Dec 2015, 12:50 PM
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
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
Tags
Grid
Asked by
Stuart
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Stuart
Top achievements
Rank 1
Tsvetina
Telerik team
Srividhya
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or