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

RadGrid Header Color with Default Skin

9 Answers 603 Views

Grid

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

9 Answers, 1 is accepted

Accepted

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.

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....

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

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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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.

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.