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

Styling header in RadGrid 2009 Q1

4 Answers 54 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Per
Top achievements
Rank 1
Per asked on 31 Mar 2009, 09:10 AM
Hi!

I'm trying to change the default blue header background of the radgrid (used by the vista theme), by overriding the class in a css, but I can not get it to work :(

I have added the following lines to my css:
.rgHeader
{
 background: #e2e2e2; 
}

The background is still blue...

But if I add the following lines:
.rgHeader a
{
 background: #e2e2e2; 
}
The background of the header text changes (i'm using sorting)

There were no problems changing the styles for Pager, footer and commandbar, its just the header that doesn't work :(

Regards,
Per

4 Answers, 1 is accepted

Sort by
0
Per
Top achievements
Rank 1
answered on 31 Mar 2009, 09:45 AM
Found it :)

The problem is that if you set a css style to the rgHeader of a radgrid, your style will be overwriten by radgrids internal theme.

To stop this behavior, you need to use the  "!important" declaration to your css.

Example:
THIS WILL NOT WORK!
.rgHeader
{
 background: #e2e2e2; 
}

THIS WILL WORK!
.rgHeader
{
 background: #e2e2e2 !important; 
}

Hope this helps someone :)

Regards
Per
0
Per
Top achievements
Rank 1
answered on 31 Mar 2009, 09:50 AM
After reading through the blog on http://blogs.telerik.com/dimodimov/posts/08-06-17/How_To_Override_Styles_in_a_RadControl_for_ASP_NET_AJAX_Embedded_Skin.aspx

I would class this behavior as a bug.
The blogs says that you should not need to use the !important statement, but in this case, I can't find any other way :(

regards
Per
0
Sebastian
Telerik team
answered on 31 Mar 2009, 10:26 AM
Hello Per,

As explained in the blog post, you need to expose css class with higher specificity than the standard css class set through the embedded grid skin. Therefore, the following modification should bring the expected result:

th.rgHeader  
{  
 background#e2e2e2;    
}  
 
or  
 
.rgHeader td  
{  
   background#e2e2e2;    

Best regards,
Sebastian
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Per
Top achievements
Rank 1
answered on 31 Mar 2009, 10:38 AM
Hi!

I did try that aswell, but the problem here is that the css class is set in the lowest posible item already, hence I can not override it:

This is the code that radgrid creates:

<TH class=rgHeader title="" scope=col UniqueName="EmployeesUniqueUserId">
    <A title="Click here to sort" href="javascript:__doPostBack('ctl00$cpm$RadGrid1$ctl00$ctl02$ctl02$ctl00','')">User Id</A>
</TH>

I get the feeling that the rgHeader class realy should have been placed on the outer <tr> instead directly on the th, but I can be wrong ;)


Tags
Grid
Asked by
Per
Top achievements
Rank 1
Answers by
Per
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or