This is a migrated thread and some comments may be shown as answers.
Kendo UI - Grid virtual with bottom empty space
1 Answer 31 Views
This is a migrated thread and some comments may be shown as answers.
Paul van Eijk
Top achievements
Rank 1
Paul van Eijk asked on 25 Sep 2020, 09:01 AM


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.


1 Answer, 1 is accepted

Sort by
Telerik team
answered on 29 Sep 2020, 05:40 AM

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).

Asked by
Paul van Eijk
Top achievements
Rank 1
Answers by
Telerik team
Share this question