Kendo grid with dynamic height row count

2 posts, 0 answers
  1. Robert
    Robert avatar
    2 posts
    Member since:
    Oct 2015

    Posted 09 Mar 2016 Link to this post

    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');

    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?

  2. Robert
    Robert avatar
    2 posts
    Member since:
    Oct 2015

    Posted 11 Mar 2016 in reply to Robert Link to this post

    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.
Back to Top