Override HeaderStyle Color

4 posts, 0 answers
  1. Pat
    Pat avatar
    14 posts
    Member since:
    Apr 2011

    Posted 12 May 2011 Link to this post

    I build my grid in code

    RadGrid RadGrid1 = new RadGrid();
     
    RadGrid1.ID = "RadGrid1";
    RadGrid1.DataSourceID = "SqlDataSource1";
    RadGrid1.MasterTableView.DataKeyNames = new string[] { "Jobnumber" };
    RadGrid1.Skin = "WebBlue";
    //RadGrid1.EnableEmbeddedSkins = false;
    RadGrid1.Width = Unit.Percentage(100);
    RadGrid1.PageSize = 15;
    RadGrid1.AllowPaging = true;
    RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrev;
    RadGrid1.AllowSorting = true;
    RadGrid1.AllowFilteringByColumn = false;
    RadGrid1.AutoGenerateColumns = false;
    RadGrid1.ClientSettings.Resizing.AllowColumnResize = true;
    RadGrid1.ClientSettings.Resizing.ResizeGridOnColumnResize = true;
    RadGrid1.ClientSettings.Resizing.ClipCellContentOnResize = true;
    RadGrid1.ClientSettings.AllowColumnsReorder = true;
    RadGrid1.ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder;
    RadGrid1.GridLines = GridLines.Both;
    RadGrid1.ItemCommand += new GridCommandEventHandler(RadGrid1_ItemCommand);
    RadGrid1.PageIndexChanged += new GridPageChangedEventHandler(RadGrid1_PageIndexChanged);
     
    //Add columns
     
    GridButtonColumn buttonColumn = new GridButtonColumn();
    buttonColumn.HeaderText = "Select File";
    buttonColumn.CommandName = "Select";
    buttonColumn.ButtonType = GridButtonColumnType.PushButton;
    buttonColumn.Text = "Go";
    buttonColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
    buttonColumn.HeaderStyle.Width = 50;
     
    buttonColumn.HeaderStyle.BackColor = System.Drawing.Color.Crimson;
    buttonColumn.HeaderStyle.BorderColor = System.Drawing.Color.Crimson;
     
    RadGrid1.Columns.Add(buttonColumn);

    I use the embedded Skin "WebBlue" However when I try to override the headerstyle color of the first column only half the header is changed.



  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 13 May 2011 Link to this post

    Hello Pat,

    I also faced the same issue when I tried your scenario. In order to overcome this issue, you can apply a  custom CSS class to override the default CSS style .
    CSS:
    .myCustomClass
    {
     background-color:Red;
    }

    C#:
    GridButtonColumn buttonColumn = new GridButtonColumn();
    RadGrid1.Columns.Add(buttonColumn);
    buttonColumn.HeaderText = "Select File";
    buttonColumn.CommandName =
    "Select";
    buttonColumn.ButtonType = GridButtonColumnType.PushButton;
    buttonColumn.Text =
    "Go";
    buttonColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
    buttonColumn.HeaderStyle.Width = 50;

    buttonColumn.HeaderStyle.CssClass =
    "myCustomClass";

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pat
    Pat avatar
    14 posts
    Member since:
    Apr 2011

    Posted 13 May 2011 Link to this post

    Thanks Princy.  Any Idea on how to get the multi color effect in the header?  I copied an existing skin and change the header colors and got the same effect as in my image.  I could not figure out how to change the colors on the top part of the header.
  5. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 18 May 2011 Link to this post

    Hello Pat,

    The cause of this is that the header is styles using a background image. If you want to remove the image from the built-in skin or change it, I would advise you to simply use CSS:
    div.RadGrid_Default .rgHeader, div.RadGrid_Default th.rgResizeCol
     {
         background-image: none;
         background-color: #33CCFF;
     }

    This way you remove the built-in image and set only color. Of course, instead of setting none, you could provide a path to another image that you would like to use for a background.

    Best wishes,
    Tsvetina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top