Unable to Set Background Color of Header

8 posts, 1 answers
  1. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 20 Jul 2012 Link to this post

    Here's the initial portion of a RadGrid I've defined:

    <telerik:RadGrid ID="radGrid" runat="server" AutoGenerateColumns="false" Width="100%" BorderWidth="0" <br>                 CellPadding="0" GridLines="Vertical" Font-Size="11px" OnItemDataBound="radGrid_ItemDataBound"><br>  <MasterTableView BorderWidth="0"><br>    <HeaderStyle BackColor="#bcd0fe" Font-Bold="true" ForeColor="#031d5b" VerticalAlign="Top" /><br>

    The BackColor property appears to have no effect.  Is this a known bug with RadGrid or is there another way I'm supposed to set the background color of the Header?

    Robert



  2. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 20 Jul 2012 Link to this post

    Hello,

    Please try with below code snippet.
    <style type="text/css">
            .Myheader
            {
                background-color:Red !important;
                background-image:none !important;
            }
        </style>
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnItemDataBound="RadGrid1_ItemDataBound"
                OnNeedDataSource="RadGrid1_NeedDataSource">
                <HeaderStyle CssClass="Myheader" />
    .......
    ......


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 20 Jul 2012 Link to this post

    Thank you, Jayesh.  That fixed it!  However I think that Telerik should consider this issue to be a bug.  I realize that there's probably some convoluted technical explanation of why setting the "BackColor" property doesn't set the Background Color but it should.  Period.

    Ancillary question: I've notice that the header is somewhat taller than I'd ideally like.  I've tried changing the Height property but it has no effect.  Any ideas?
  5. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 20 Jul 2012 Link to this post

    Update: I just solved the RadGrid Header height issue by following Jayesh's guidance and adding these two lines to the CSS entry:

        padding-top:2px !important;
        padding-bottom:2px !important;

    Now the RadGrid Header height is identical to the default height of Microsoft's GridView Header.  This makes things more visually compatible when you have both controls appearing on the same screen!
  6. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 20 Jul 2012 Link to this post

    I'm now trying to shrink the height of the non-header grid rows using the approach outlined earlier.  But it's not working.

    Might anyone have any ideas?

    Robert
  7. Robert
    Robert avatar
    253 posts
    Member since:
    Aug 2007

    Posted 22 Jul 2012 Link to this post

    Finally figured it out:

    div.RadGrid .rgRow td
    {
      padding-top:0;
      padding-bottom:0;
    }

    div.RadGrid .rgAltRow td
    {
      padding-top:0;
      padding-bottom:0;
    }
  8. Peter
    Peter avatar
    98 posts
    Member since:
    Mar 2012

    Posted 31 Mar 2015 in reply to Robert Link to this post

    Agree - if setting <HeaderStyle BackColor="[X]"doesn't do anything, then it's a bug. 
  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 02 Apr 2015 Link to this post

    Hi Peter,

    Note that in the most skins of RadGrid control we are loading background images and settings back color this way will not give any effect in this case. The mentioned property can be used for skins that are not loading background images, like the Metro skin for example.

    Regards,
    Maria Ilieva
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017