Override HeaderStyle Color

[Pat]

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.

[Princy]

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.

[Pat]

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.

[Tsvetina]

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