[Solved] Header Div Width with Static Headers

[Cyber High]

When allowScroll is true and useStaticHeaders is also true, the header div does not occupy 100% of the width of the containing div in FIrefox 3 (FF3). It works ok in Firefox 2, IE7, and Opera 9. In FF3, the grid header div stops where the scrollbar would be if the header div had scrolling.

<telerik:radgrid id="RadGrid1" runat="server" skin="Office2007" autogeneratecolumns="false" onneeddatasource="RadGrid1_NeedDataSource" width="350px">
  <clientsettings>
    <scrolling allowscroll="true" scrollheight="150px" usestaticheaders="true" />
  </clientsettings>
  <mastertableview>
    <columns>
      <telerik:gridbuttoncolumn datatextfield="link" headertext="Test Header" buttontype="LinkButton" />
    </columns>
  </mastertableview>
</telerik:radgrid>

protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e) {
  DataTable dt = new DataTable();
  dt.Columns.Add("link", typeof(String));
  for (int i = 0; i < 50; i++) {
    DataRow row = dt.NewRow();
    row["link"] = "Test Link";
    dt.Rows.Add(row);
  }
  RadGrid1.DataSource = dt;
}

[Cyber High]

I can temporarily work around this by modifying the function "GetHeaderDivWidth()" in the GridTable.cs class to the following:

private string GetHeaderDivWidth() {
  string width = "";
  if (!this._ownerTableView.OwnerGrid.IsDesignMode) {
    if (this.Page != null && this.Page.Request != null) {
      if (this.Page.Request.Browser.Browser.ToLower().IndexOf("firefox") != -1 && this.Page.Request.Browser.Version.Substring(0, 1) == "3") {
        width = "width:100%;";
      }
    }
  }
  return width;

}

I do not want to use this as a permanent solution as I would have to modify the source code every time I update the control suite.

Also, why is the control hard coded to add a 16px padding to the header div?

[Dimo]

Hello Guido,

The visual glitch in Firefox 3 is caused by:

http://blogs.telerik.com/dimodimov/posts/08-07-23/browser_inconsistencies_with_scrolling_and_padding.aspx

I don't recommend using the width:100% workaround, as it may spoil the header / data column alignment in some scenarios.

A better workaround would be to create an image, which looks like the RadGrid header row and set it as a background image to the RadGrid outer div:

CSS

div.RadGrid_Office2007
{
     background: url(.....) 100% 0 repeat-x;
}


Alternatively, you can leave the empty space in the top-right corner in Firefox 3 as is - in previous versions RadGrid looked that way in all browsers.

The 16px right padding corresponds to the standard scrollbar width. It is set on the server and recalculated on the client.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Cyber High]

Thanks Dimo, that is a better work-around.