RadGrid Header Color with Default Skin

10 posts, 1 answers
  1. Deva Kumar
    Deva Kumar avatar
    12 posts
    Member since:
    Nov 2009

    Posted 26 Nov 2009 Link to this post

    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
  2. Answer
    Daniel
    Admin
    Daniel avatar
    4946 posts

    Posted 26 Nov 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Deva Kumar
    Deva Kumar avatar
    12 posts
    Member since:
    Nov 2009

    Posted 27 Nov 2009 Link to this post

    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
  5. Shawn
    Shawn avatar
    83 posts
    Member since:
    Jan 2009

    Posted 02 Dec 2009 Link to this post

    I cant get mine to work for some reason.
    th.GridHeader_Sunset 
        font10px ArialHelveticasans-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....
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 Dec 2009 Link to this post

    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 ArialHelveticasans-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.
  7. Augusto Cosatti
    Augusto Cosatti avatar
    32 posts
    Member since:
    Jul 2009

    Posted 13 Jan 2010 Link to this post

    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-sizexx-small;  
    }  
     

    Thanks
    Regards
    Augusto
  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Jan 2010 Link to this post

    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.
  9. NK
    NK avatar
    7 posts
    Member since:
    Nov 2010

    Posted 15 Aug 2012 Link to this post

     

    .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

  10. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 16 Aug 2012 Link to this post

    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.
  11. Fawad
    Fawad avatar
    20 posts
    Member since:
    Nov 2014

    Posted 20 Nov 2014 in reply to Pavlina Link to this post

    The css you provided did not really work. background can take effect but not the fore-color.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017