UseStaticHeaders causing a bug in footer

15 posts, 0 answers
  1. Danny
    Danny avatar
    29 posts
    Member since:
    Feb 2012

    Posted 22 May 2012 Link to this post

    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.
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 22 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Danny
    Danny avatar
    29 posts
    Member since:
    Feb 2012

    Posted 22 May 2012 Link to this post

    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
  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 23 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Danny
    Danny avatar
    29 posts
    Member since:
    Feb 2012

    Posted 23 May 2012 Link to this post

    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
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 28 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Danny
    Danny avatar
    29 posts
    Member since:
    Feb 2012

    Posted 29 May 2012 Link to this post

    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
  9. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 30 May 2012 Link to this post

    Hi Danny,

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

    All the best,
    Pavlina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. John Pendergrast
    John Pendergrast avatar
    2 posts
    Member since:
    Jul 2004

    Posted 19 Jul 2012 Link to this post

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

    Telerik.Web.UI  2012.1.411.40
  11. Danny
    Danny avatar
    29 posts
    Member since:
    Feb 2012

    Posted 20 Jul 2012 Link to this post

    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
  12. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 23 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. Andrew
    Andrew avatar
    10 posts
    Member since:
    Jan 2012

    Posted 29 Nov 2012 Link to this post

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

  14. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 04 Dec 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  15. Andrew
    Andrew avatar
    10 posts
    Member since:
    Jan 2012

    Posted 04 Dec 2012 Link to this post

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

    Posted 09 Dec 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017