css and Header background

[Soeren Pedersen]

Hi

Having a slight issue when I want to change the background image on the grid header from the default one using css.

.RadGrid_Default .rgHeader

{

    background:#ffffff repeat-x url('/images/GridHeader-BG.gif');

}

  

.RadGrid_Default th.rgSorted

{

    background:#ffffff repeat-x url('/images/GridHeader-BG.gif');!important;

    background-color:#ffffff;

}

The Header background images does indeed change to the correct image. However as soon as I do a sort it reverts back to the default. 

Do I need to do anything more to stop this from happening than just css?

Regards,
Soeren 

[Princy]

Hello Soeren,


I tried the same CSS (rgHeader) and got confused since the issue is not happening for me even though I didn't override the 'rgSorted' style. One thing I want to mention is, you need to add !important modifier in order to override the default style setting. Here is the code that I tried.

CSS:

<style type="text/css">
    .rgHeader
    {
        background: #ffffff repeat-x url('../Images/headerBackGriund.jpg') !important;
    }
</style>

Also, please check whether you have any other style set on page which affects the appearance when sorting is happened. Feel free to share the comments.. :)



Thanks,
Princy.

[Soeren Pedersen]

Hi Princy

Its very weird. It only revert back to the default background on the first sort, if I do any other actions on the grid it flips back to the custom background.

And yes, have tried using !important;

Note upon further testing.. Only happens in IE, I tried merging some style-sheets to make sure I did not hit the IE limit, but still the same problem.

Regards,
Soeren

[Dimo]

Hi Soeren,

You need to use higher specificity in your CSS selectors:

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

Also, the !important string should be before the semi-colon, not after it.

All the best,
Dimo
the Telerik team

[Soeren Pedersen]

Ah, adding div before the RadGrid_Default sorted it out.

So my code now looks like this and works fine.

div.RadGrid_Default .rgHeader
{
    background:#ffffff repeat-x url('/images/GridHeader-BG.gif') !important;
}

Thanks for the great support as always.

[HL]

Hi all:
   I have the similar issue. What I want to do is to set up Radgrid header bg color as well as fond color dynamically? But header color never change. I wonder if i have to use the image ? what I did is

on server side: (I have to change it on server side since strCssFileName will be dynamically set)

Public Sub UpdateWidgetRadGridCssFiles(ByRef dgrDataGrid As Telerik.Web.UI.RadGrid, ByVal strCssFileName As String)
       If Not dgrDataGrid Is Nothing Then
           With dgrDataGrid
               .ItemStyle.CssClass = "InnerItemStyle"
               .AlternatingItemStyle.CssClass = "InnerAlernatingItemStyle"
               .HeaderStyle.CssClass = strCssFileName
           End With
       End If
   End Sub

on my css files:

.InnerHeaderStyle
{
     color: black;!important;
     background: #338FAE;!important;
     background-color:#338FAE;!important;
}

any idea or suggestion?

Thanks
Helena

[HL]

Hi all:
   I have the similar issue. What I want to do is to set up Radgrid header bg color as well as fond color dynamically? But header color never change. I wonder if i have to use the image ? what I did is

on server side: (I have to change it on server side since strCssFileName will be dynamically set)

Public Sub UpdateWidgetRadGridCssFiles(ByRef dgrDataGrid As Telerik.Web.UI.RadGrid, ByVal strCssFileName As String)
       If Not dgrDataGrid Is Nothing Then
           With dgrDataGrid
               .ItemStyle.CssClass = "InnerItemStyle"
               .AlternatingItemStyle.CssClass = "InnerAlernatingItemStyle"
               .HeaderStyle.CssClass = strCssFileName
           End With
       End If
   End Sub

on my css files:

.InnerHeaderStyle
{
     color: black;!important;
     background: #338FAE;!important;
     background-color:#338FAE;!important;
}

any idea or suggestion?

Thanks
Helena

[Princy]

Hello,

If you want to change background color of the header dynamically use prerender event which enables dynamic formatting.Hope this code might help you.

C#:

protected void RadGrid2_PreRender(object sender, EventArgs e)
    {
        GridHeaderItem headerItem = RadGrid2.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem;
        headerItem.CssClass = "InnerItemStyle";
}

CSS:

<style type="text/css">
     .InnerItemStyle
        {
            color: black !important;
            background: #338FAE !important;
            background-color: #338FAE !important;
        }
    </style>

With regards,
Princy

[HL]

Hi Princy:
   Thanks for your reply. it only works for the first time. if I dynamically changed css file name on the RadGrid2_PreRender, the header still didn't change the color

any idea?
Thanks
Helena

[Galin]

Hello Helena,

This CSS will not change the background and font color because in RadGrid built-in Skins those styles are apply to the cell elements, not to the row. Thus even your styles set the background of the row, you will see the style applied on the cell. Try this CSS rule instead:

.RadGrid .InnerItemStyle th.rgHeader
{
    color: black;
    background: #338fae;
}

Also if you allow sorting for the Grid or other property that renders link element in header, you have to set font color especially to it, because the <a> element does not inherit it:

.RadGrid .InnerItemStyle th.rgHeader a
{
    color: black;
 }

Keep in mind that if you use higher specificity in your CSS selectors you do not need !important:
http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

Additionally, I highly recommend you to use web tools like Firebug for Firefox / IE developer tool. Shortcut F12 activates both and with them it is very easy to inspect the elements and to see the styles that they have. After researching the styles of the elements you can add or edit their rules.

If this does not help you, could you please send us a small running project that we can use to reproduce the case? I am interested especially in how you initialize this function: UpdateWidgetRadGridCssFiles.


Best wishes,
Galin
the Telerik team