Override Header Cell Color

10 posts, 1 answers
  1. Derek
    Derek avatar
    19 posts
    Member since:
    Jun 2011

    Posted 06 Dec 2011 Link to this post

    I'm using a RadGrid with the theme Web20 and I'm having trouble changing the color for a specific cell in the RadGrid header. I noticed the header is using an image to create the gradient look, but I need to create the look of a spacer. I was able to accomplish this with the tree list, but I'm having issues doing this with the radgrid. See the pictures attached. 

    I'm looking to do this in CSS on inline style or something that doesn't require a reference to System.Drawing in the VS project. Capture1.png below is the radgrid. Capture2.png is the treelist.

    Thanks,

    Derek
  2. Pablo
    Pablo avatar
    10 posts
    Member since:
    Oct 2012

    Posted 06 Dec 2011 Link to this post

    Derek,

    What you can do is the following is subscribe your grid to the itemcreate event and do the following:


    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {

                if(e.item.ItemType == GridItemType.Header

                {
                        //Change the background color of the header here
                        item.Style["background-color"] = "#b05a33";
                       
                        //Change the font if you would like
                      item.Style["color"] = "#FFFFFF";
                        item.Style["font-size"] = "9px";
                 }            

     }

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Dec 2011 Link to this post

    Hello Derek,

    Try the following CSS.
    CSS:
    <style type="text/css">
     .RadGrid_Web20 th.rgHeader
     {
      color:Red;
     }
    </style>

    -Shinu.
  5. Derek
    Derek avatar
    19 posts
    Member since:
    Jun 2011

    Posted 07 Dec 2011 Link to this post

    Thank you for your replies. I didn't have an issue changing the entire header, but I needed to do it for a specific column. I tried setting the HeaderStyle-CssClass, but the CSS change shows up behind the header theme. Any suggestions? I tried setting !important on the CSS and also tried setting z-index. Nothing helped.
  6. Derek
    Derek avatar
    19 posts
    Member since:
    Jun 2011

    Posted 11 Dec 2011 Link to this post

    Any other ideas?
  7. Answer
    Galin
    Admin
    Galin avatar
    526 posts

    Posted 12 Dec 2011 Link to this post

    Hi Derek,

    You should set the CssClass to the specific column, e.g.:
    <telerik:RadGrid ID="RadGrid1" runat="server" ...>
        <MasterTableView>
            <Columns>
                <telerik:GridBoundColumn UniqueName="Custom1" HeaderStyle-CssClass="specificHeader"></telerik:GridBoundColumn>
       ......
       ......
       ......
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>

    And use this CSS rule:
    div.RadGrid .specificHeader
    {
        background: #fff;
    }

    I hope it helps.

    All the best,
    Galin
    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
  8. Derek
    Derek avatar
    19 posts
    Member since:
    Jun 2011

    Posted 12 Dec 2011 Link to this post

    Thanks for your reply. That's the code that I have

    aspx:
    <telerik:GridTemplateColumn UniqueName="Spacer" HeaderStyle-Width="5px" 
    	HeaderStyle-CssClass="RadGridSpacerCell" 
    	ItemStyle-CssClass="RadGridSpacerCell" 
    	HeaderStyle-BorderStyle="None" ItemStyle-BorderStyle="None" />
    
    css:
    
    div.RadGrid .RadGridSpacerCell
    {
    	background-color#FFFFFF;
    }
    If you look at the picture that I showed in the first post (capture 1 I believe) you can see the CSS is being picked up behind the image header, I just can't get it to pick up in front. If there is no easy way around this, then I don't want to do workaround for a styling issue.
  9. Galin
    Admin
    Galin avatar
    526 posts

    Posted 12 Dec 2011 Link to this post

    Hello Derek,

    You should override the background-image too. Therefore, you should use background property instead of background-color:
    background: #fff;

    Best wishes,
    Galin
    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
  10. Derek
    Derek avatar
    19 posts
    Member since:
    Jun 2011

    Posted 12 Dec 2011 Link to this post

    Something so minor! Thank you all very much!
  11. Logan
    Logan avatar
    23 posts
    Member since:
    Jan 2012

    Posted 23 May 2014 in reply to Galin Link to this post

    Yes! You've Saved that day!  I was just trying to override the "background-color" but the "background" css property needs changed too!  Genius.  I guess its a picture for the back ground for the source of rad grid/tree list column headers, for Web20 and Sunset for example?  Is that why you also need to change the background property?  Thanks Again!  Telerik You Rock!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017