Kendo UI - Grid virtual with bottom empty space

[Paul van Eijk]

Hello,

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.

 

[Tsvetomir]

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:

https://demos.telerik.com/kendo-ui/grid/virtualization-local-data

Thank you for your cooperation.

 

Kind regards,
Tsvetomir
Progress Telerik