Kendo UI - Grid virtual with bottom empty space

2 posts, 0 answers
  1. Paul van Eijk
    Paul van Eijk avatar
    5 posts
    Member since:
    Apr 2009

    Posted 25 Sep 2020 Link to this post


    I will try to expain as best as I can, it's not straighforward issue.

    In my project we had grids with virtual scrolling AND paging. As we know, this is not a good idea. 

    In order to fix that, I removed the paging, leaving only virtual scrolling. Following the best practices I could find, the grid height and row height are fixed:

    .k-virtual-scrollable-wrap td {     white-space: nowrap; }

    .k-virtual-scrollable-wrap tr {     height: 40px; }

    Scrolling works great but the grid always has some empty space in the bottom (grid_empty_bottom.png). After some investigation, it seems the k-grid-content element is always rezised to less height than the specified height (grid_html.png).

    The only way I could find to fix it is to, on dataBound event, to change grid's css to match the k-grid-content element height:

    const groupingHeaderHeight = this.widgetElement.find('.k-grouping-header').outerHeight();
    const columnHeaderHeight = this.widgetElement.find('.k-grid-header').outerHeight();
    this.widgetElement.find('.k-grid-content').height((this.activeGridOptions.height as number) - groupingHeaderHeight - columnHeaderHeight);

    For reference, the grid work with client side data, the data is fetched from the server and the dataSource is added to grid (grid.setDataSource method) after grid instantiation.

    The grid is also filterable, sortable, groupable and reorderable.


  2. Tsvetomir
    Tsvetomir avatar
    796 posts

    Posted 29 Sep 2020 Link to this post

    Hi Paul,

    I carefully when over the descriptions that you have provided with your response and tested out the scenario in a local example. However, I did not notice the white space at the bottom of the grid. 

    Is it possible for you to share a sample in which the defect can be observed? For instance, you could use our virtualization of local data live demo as a base:

    Thank you for your cooperation.


    Kind regards,
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top