Added Custom Header Row - How Do I Remove or Suppress the "rgHeader" Css Class from the Generated <TH> Element?

[Sir]

Telerik.Web.UI v2010.3.1109.35

We have a radgrid (Theme/Skin="Windows7") and we've added a custom header row like this:

// ***** Add Grid Header Summary Row *****
GridItem[] header = this.MyWorkRadGrid.MasterTableView.GetItems(GridItemType.Header);
//get the current THead element
GridTHead head = ((GridTHead)header[0].Parent.Controls[1].Parent);

//create a new GridHeaderItem which will be the new row
GridHeaderItem newHeaderItem = new GridHeaderItem(this.MyWorkRadGrid.MasterTableView, 0, 0);
newHeaderItem.Width = Unit.Percentage(100);
newHeaderItem.Height = Unit.Pixel(23);

// Create a cell to hold the toolbar
GridTableHeaderCell newHeaderCell = new GridTableHeaderCell() { Width = Unit.Percentage(100), HorizontalAlign = HorizontalAlign.Left, VerticalAlign = VerticalAlign.Top };

newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "" });
newHeaderItem.Cells.Add(new GridTableHeaderCell() { Text = "" });
newHeaderCell.ColumnSpan = 5;
newHeaderItem.Width = Unit.Percentage(100);
newHeaderItem.Height = Unit.Pixel(23);

// Create the toolbar
RadToolBar toolBar = new RadToolBar();
toolBar.Height = Unit.Pixel(23);
toolBar.Skin = "Windows7";
toolBar.Width = Unit.Percentage(100);

// Create the toolbar item
RadToolBarButton button = new RadToolBarButton("Contact List");
toolBar.Items.Add(button);

// Add Controls
newHeaderCell.Controls.Add(toolBar);
newHeaderItem.Cells.Add(newHeaderCell);


for (int i = 0; i < head.Controls.Count; i++)
{
    // loop through the header controls collection and find the 'row' that has the same type of GridHeaderItem
    // Then insert the new row just above it - remember the 0 based index will push the original header row down
    if (head.Controls[i].GetType() == newHeaderItem.GetType())
    {
        head.Controls.AddAt(i, newHeaderItem);
    }
}

In this case, we added a toolbar to the header to be consistent with toolbars we have as headers on a left and right pane that sit next to this grid in the center pane.
The output of this is shown in image "Ex1.jpg" where the text is "Contact List".

The problem is that the new grid header has default padding that ends up surrounding any content you put into it.
See image "Ex2.jpg" where the purple color is the padding surrounding our content (which is a RadToolBar shown in blue shade).

When you look at the output in FireBug, the offending css class is "rgHeader" on the generated <TH> element.
See image "Ex3.jpg" - highlighted in blue.

When I use FireBug to remove that class, the padding is gone and the toolbar takes up the entire space (no more padding) and matches the other toolbars across all RadPanes.
See image "Ex4.jpg" - you can see "Contact List" toolbar text matches the toolbar on the left pane "My Workspace".

We want to keep the Windows7 Themes on the controls but can you show me how to remove or suppress that "rgHeader" class from the generated <TH> element so that we do not have to deal with the left,top,right,bottom padding it generates?

If solution can be done in code-behind, great, give me that.
If solution is style/css based in aspx page, then show me what I need to do/add.

Thanks,
Ray

[Iana Tsolova]

Hello Sir,

Try adding the following css rule and let me know if it helps.

.RadGrid .rgHeader
{
    padding-left:0 !important;
    padding-right:0 !important;
}

All the best,
Iana
the Telerik team

[Sir]

Thanks Lana!

<style type="text/css">
    .RadGrid .rgHeader{padding-left:0 !important;padding-top:0 !important;padding-right:0 !important;padding-bottom:0 !important;}
</style>
Does the trick.
Ray