UseStaticHeaders causing a bug in footer

[Danny]

Hi,

I'm having a problem with the RadGrid and using StaticHeader. When UseStaticHeaders="true", the header and footer get a margin-right of 17px (the size of the vertical scrollbar). This results in an empty/white space next to the footer/header. However, if I decrease the page size to 10, the scrollbar disappears. Now, the margin from the header is removed and gets the full width of the grid. But the margin is not removed from the footer.

Steps to reproduce:

Markup:

<telerik:RadGrid ID="grdData" runat="server" PageSize="20" AllowPaging="true" ShowFooter="true" OnNeedDataSource="grdData_NeedDataSource">
    <ClientSettings>
      <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
      <Resizing ClipCellContentOnResize="false" AllowColumnResize="true" AllowResizeToFit="true" EnableRealTimeResize="true" />
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="true">
    </MasterTableView>
  </telerik:RadGrid>

Code behind:

public partial class test : System.Web.UI.Page {
    public class MyDataItem {
      public int Id { get; set; }
      public string Name { get; set; }
    }

    protected void Page_Load(object sender, EventArgs e) {

    }

    protected void grdData_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e) {
      List<MyDataItem> datasource = new List<MyDataItem>();
      for (int i = 0; i < 100; i++) {
        datasource.Add(new MyDataItem() {
          Id = i,
          Name = "name_" + i
        });
      }

      grdData.DataSource = datasource;
    }
  }

On initial load, the page size is 20 and the vertical scrollbar, including the whitespaces, it rendered.
Now reduce the pagesize to 10: the vertical scrollbar is gone but the whitespace next to the footer remains.

In this example in doesn't look like a problem (besides it doesn't look nice). However, I'm having a grid with 20 columns and values in the footer. The last value can't be read completely because half of the text is cut of due to the margin.

Is this realy a bug or am I doing something wrong? And is there any workaround?

Thanks.

[Pavlina]

Hello Danny,

In previous versions of RadControls there was an empty space in header above the scroll. The exception was only in some versions of IE. Unfortunately it is impossible to remove the gap in all browser without making a breaking change of the rendering of the RadGrid, so we made the RadGrid to behave in the same way in all browser and now it looks this way in IE.

However, you can fix it by making a new image exactly like the header and set it as background of RadGrid with the following CSS:

div.RadGrid
{
    background: url('header_bgr.gif') repeat-x 100% 0;
}

When the footer of the RadGrid is displayed, as in your case, you can use the CSS code snippet below to workaround it:

div.RadGrid
{
    background: #eeeeee url('header_bgr.gif') repeat-x 100% 0;
}
.rgDataDiv
{
    background: #fff;
    border-bottom: 1px solid #828282;
}
div.RadGrid .rgFooter td
{
    border-top: 0 none;
}

I am also attaching a sample project for one of the built-in Telerik Skins.

Regards,
Pavlina
the Telerik team

[Danny]

Hi Pavlina,

Thanks for your (really) fast reply. Your solution sound quite logic, however, it doesn't solve the issue that half of the text is cut of in the footer row. In my project (not this example) the footer is displaying the sum of the rows, and is rigth aligned.

I hope you understand what I mean.

Thanks
Danny

[Pavlina]

Hi Danny,

Can you send us a live URL of your application where the described problem can be observed, so we can inspect it locally and advice you further?

All the best,
Pavlina
the Telerik team

[Danny]

Hi Pavlina,

I'm affraid that's not possible (all confidential information).

I changed the sample a lit bit. You should be ablo to reproduce (it's exact the same behavior as my application):

• On initial load, the footer is showing "Sum: 4950".

• If you now decrease the page size from 20 to 10, the vertical scollbar disappears, and the footertext is now "Sum: 49". The '50' behind 49 is cut of due to the margin.

Markup:
 

<telerik:RadGrid ID="grdData" runat="server" PageSize="20" AllowPaging="true" ShowFooter="true" OnNeedDataSource="grdData_NeedDataSource">
    <ClientSettings>
      <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" />
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="false">
    <ItemStyle HorizontalAlign="Right" />
    <AlternatingItemStyle HorizontalAlign="Right" />
    <FooterStyle HorizontalAlign="Right" />
    <Columns>
      <telerik:GridBoundColumn DataField="Id" HeaderText="Id">
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn DataField="Name" HeaderText="Name">
      </telerik:GridBoundColumn>
      <telerik:GridBoundColumn DataField="Value" Aggregate="Sum" HeaderText="Value">
      </telerik:GridBoundColumn>
    </Columns>
    </MasterTableView>
  </telerik:RadGrid>

Code behind:

public partial class test : System.Web.UI.Page {
  public class MyDataItem {
    public int Id { get; set; }
    public string Name { get; set; }
    public int Value { get; set; }
  }

  protected void Page_Load(object sender, EventArgs e) {

  }

  protected void grdData_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e) {
    List<MyDataItem> datasource = new List<MyDataItem>();
    for (int i = 0; i < 100; i++) {
      datasource.Add(new MyDataItem() { Id = i, Name = "name_" + i, Value = i });
    }

    grdData.DataSource = datasource;
  }
}

Thanks,
Danny

[Pavlina]

Hello Danny,

To resolve the described problem you should set TableLayout property of the MasterTableView to Fixed. I am also attaching a sample runnable project which I prepared based on the provided code and it is working properly. Give it a try and let me know if any questions arise.

Regards,
Pavlina
the Telerik team

[Danny]

Hi Pavlina,

Your fix does show the complete footer, however, the white-gap (the 17px margin) is stille there. This causes that the footer text is not aligned exactly beneath the rest of the text.

I still think this is a bug. The margin is removed from the header, so why not from the footer?

Do you think this is something that can be fixed within the next release? In the meantime I'm fine with using this fix.

Thanks,
Danny

[Pavlina]

Hi Danny,

I will forward this issue to our developers for further investigation.

All the best,
Pavlina
the Telerik team

[John Pendergrast]

Has there been any resolution to this issue?  I am experiencing the same thing.

Telerik.Web.UI  2012.1.411.40

[Danny]

Hi John,

I'm not sure exactly. Some CSS expert here made some 'hacks' and it's working here now. You could try to update to the Q2 release. Not sure if it's fixed in there.

Maybe Pavlina could update us about this?

-Danny

[Pavlina]

Hello John,

Can you upgrade to latest official version of RadControls for ASP.NET AJAX and let us know if the problem with grid footer still persists?

Regards,
Pavlina
the Telerik team

[Andrew]

I'm still seeing the same problem with v.2012.3.1016.40.

[Pavlina]

Hello Andrew,

Indeed you are right that the issue with the gap in RadGrid's Footer when staticHeaders are enabled is not fixed in Q3 2012 release of the controls. However, this problem is fixed and the fix will be available in the SP1 release of the controls which is scheduled for this week.

Greetings,
Pavlina
the Telerik team

[Andrew]

For what it's worth, this only happens for me when setting:
  - ClientSettings > Scrolling > AutoScroll = True.
  - ClientSettings > Scrolling > UseStaticHeaders = True

[Pavlina]

Hello,

Can you verify that the problem you are facing still persists with version Q3 2012 SP1 of RadControls?

Kind regards,
Pavlina
the Telerik team