Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadGrid Header Color with Default Skin

9 Answers 543 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Deva Kumar
Top achievements
Rank 1
Deva Kumar asked on 26 Nov 2009, 07:30 PM
Hi Experts

Is there any way to set/override the RadGrid Header Color while using the default skin.
I tried all possible ways and couldnt make it happen.

Thank you,
Deva

9 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 26 Nov 2009, 09:30 PM
Hello Deva,

You can easily override the background image and replace it with a color of your choice:
<style type="text/css">
    .RadGrid_Black th.rgHeader
    {
        background-image: none;
        background-color: #ba000c;
    }
</style>

Replace "Black" with the skin name you use.

I strongly recommend you examine this blog post:
How To Override Styles in a RadControl for ASP.NET AJAX' Embedded Skin

Kind regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Deva Kumar
Top achievements
Rank 1
answered on 27 Nov 2009, 10:18 AM
Thanks again Daniel.

Your solutions works perfectly fine. Thank you.

Earlier - I didnt set the background-image: none;

As per your directions - I wrote this and it is working fine. Thank you so much.

.RadGrid_Default th.rgHeader
{
 background-image: none;
 background-color: #ba000c;
}

Thank you,
Deva
0
Shawn
Top achievements
Rank 1
answered on 02 Dec 2009, 06:16 PM
I cant get mine to work for some reason.
th.GridHeader_Sunset 
{ 
    font: 10px Arial, Helvetica, sans-serif; 
    color: #FFFFFF; 
}  
 

If I add a bold to the style above the bolding takes effect, but if I change the font color or size it does nothing... why would that be?

Not only that, if I open the RadGrid property builder, it doesn't show me any style options in the 'Styles Manager' for Header.  If I click on footer or pager, or anything else it gives me options....
0
Princy
Top achievements
Rank 2
answered on 03 Dec 2009, 04:59 AM
Hello Shawn,

You should be trying the following css code to set the style for the grid header:
css:
   .RadGrid_Sunset th.rgHeader  
    {  
        font:10px Arial, Helvetica, sans-serif;  
        color:#FFFFFF;  
    } 

Also, you should be able to find the HeaderStyle option in the RadGrid property builder to set the required styles for the header.

Thanks
Princy.
0
Augusto Cosatti
Top achievements
Rank 1
answered on 13 Jan 2010, 09:11 AM
Hello.

I don't understand what are the functions of the HeaderStyle-xxx attributes that we can define in the grid and MasterTableView definition.
Actually they don't seem to have any effect. Why do we have to override the skin's style attributes. Why not simply use the HeaderStyle-xxx properties ?

WIth the suggested solution I tried to change the font size of the header but it does not work. Do you have any idea ?

div.RadGrid_Office2007 th.rgHeader  
{    
    font-size: xx-small;  
}  
 

Thanks
Regards
Augusto
0
Dimo
Telerik team
answered on 14 Jan 2010, 12:52 PM
Hello Augusto,

Some HeaderStyle properties (e.g. ForeColor, Font-Underline) do not work when sorting is enabled, because the properties are applied to the header cell and the linkbuttons inside do not inherit them (which is normal).

However, font-size should work when being set declaratively. If it doesn't, then you have some more specific styles for LinkButtons (<a> elements) in your application and should check that with a tool such as Firebug.

Here is a simple demo, which works as expected:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  
<script runat="server">
  
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 4;
        string colName = "Column";
  
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
  
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
  
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
  
        (sender as RadGrid).DataSource = dt;
    }
      
</script>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
  
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    AutoGenerateEditColumn="true"
    AllowSorting="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <HeaderStyle Font-Size="XX-Small" />
    </MasterTableView>
</telerik:RadGrid>
  
</form>
</body>
</html>


Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
NK
Top achievements
Rank 1
answered on 15 Aug 2012, 04:32 PM

 

.RadGrid_Sunset th.rgHeader ,.RadGrid_Sunset th.rgSorted

{

 

background-image: none;

 

background-color: Red;

 

color:White;

}
I have added this code for changing my grid header but after click column to sort,the same css not works.it gone agin the default skin color.I have added RadGrid_Sunset th.rgSorted,but no luck....Please help me for the same

Thanks in advance..

Nalini Nanda

0
Pavlina
Telerik team
answered on 16 Aug 2012, 07:43 PM
Hi Nalini,

To achieve the desired result you should add  "div" to the selector as shown below: 
<style type="text/css">
        div.RadGrid_Sunset th.rgHeader,
        div.RadGrid_Sunset th.rgSorted
        {
            background-image: none;
            background-color: Red;
            color: White;
        }
    </style>

Thus the CSS rule has higher weight than the skin's rule.

Regards,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Fawad
Top achievements
Rank 1
answered on 20 Nov 2014, 09:17 AM
The css you provided did not really work. background can take effect but not the fore-color.
Tags
Grid
Asked by
Deva Kumar
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Deva Kumar
Top achievements
Rank 1
Shawn
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Augusto Cosatti
Top achievements
Rank 1
Dimo
Telerik team
NK
Top achievements
Rank 1
Pavlina
Telerik team
Fawad
Top achievements
Rank 1
Share this question
or