This is a migrated thread and some comments may be shown as answers.

Kendo grid with dynamic height row count

1 Answer 492 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robert
Top achievements
Rank 1
Robert asked on 09 Mar 2016, 10:23 PM

I have a Kendo grid which fetches data from a REST endpoint.  Until now, it's had a fixed height, and everything is golden.

Now I'm trying to make it fill its parent div's height.  I've gotten that to work via suggestions in other threads in this forum; essentially:

$(window).resize(() => {
   const grid: any = $('.grid-selector').data('kendoGrid');
   grid.resize(true);
});

This does allow the grid to fill its parent div's space - great.  Unfortunately, there is an occasional hiccup with the displayed rows.  The most common issue that I see is the following:

Say I have a grid with rowCount: 20, displaying a data set with size === 500.  (Server paging is enabled, in case that is important).  If the window is sized such that < 20 rows are visible at any one time, the UI looks as expected - the grid's viewport is filled with rows, and I can scroll through them and see them all.

If I then resize the window such that > 20 rows should be visible, I instead see only 20 rows, with whitespace at the bottom of the grid's viewport.  Further, I never see the "last few rows" of data - as if the grid component expects the rows in the whitespace to be painted when they aren't.  Viewing network traffic, it appears that the grid is indeed making queries for data correctly, it's strictly a visual glitch.

If I set rowCount to something larger than I expect any user to see on the screen at a time (say 100), the UI appears to function properly again - I never see whitespace within the grid's viewport.  I'm nervous that this is masking a problem though, not fixing it, and there may still be an issue.

Hopefully that made sense.  I'm attaching a screenshot showing the problem.  Is there something else I have to do to trigger a complete re-rendering, and possible re-fetching, of data on resize events?

1 Answer, 1 is accepted

Sort by
0
Robert
Top achievements
Rank 1
answered on 11 Mar 2016, 03:26 PM
Embarrassingly, I tracked this down to rogue CSS on our end.  Should have dug harder for posting, sorry for the noise.  The code I posted does seem to work when everything else is set up properly.
Tags
Grid
Asked by
Robert
Top achievements
Rank 1
Answers by
Robert
Top achievements
Rank 1
Share this question
or