This is a migrated thread and some comments may be shown as answers.

Override HeaderStyle Color

3 Answers 562 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pat
Top achievements
Rank 1
Pat asked on 12 May 2011, 05:58 PM
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.



3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 13 May 2011, 05:40 AM
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.
0
Pat
Top achievements
Rank 1
answered on 13 May 2011, 11:59 AM
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.
0
Tsvetina
Telerik team
answered on 18 May 2011, 04:01 PM
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.

Tags
Grid
Asked by
Pat
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Pat
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or