Grid with virtual scrolling and flex

2 posts, 1 answers
  1. Marcin
    Marcin avatar
    7 posts
    Member since:
    Feb 2017

    Posted 06 Jan Link to this post

    Hi,

    I would like to ask about one thing on which I could not find exact answer. According to documentation, one of requirements for virutal scrolling is to set height property on grid. What about a case when I'd like to have dynamic height - take all space left(e.g. by flex: 1). From what I checked still height is needed(but can be set just to 100%, then flex can take care about filling remaining space). From what I checked with adjusting example from documentation it seems to work: 
    https://stackblitz.com/edit/react-kgfbgg-risfhh?file=app%2Fmain.jsx

    I would like to use this approach as base for all grids in application - is it correct way to go?

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3004 posts

    Posted 07 Jan Link to this post

    Hello, Marcin,

    Thank you for your example.

    This is technically possible, but please have in mind that regardless of the height this requirement has to be covered:

    `(Required) pageSize—To avoid unexpected behavior during scrolling, set pageSize to at least the number of the visible Grid elements. The number of the visible Grid elements is determined by the height and rowHeight settings of the Grid.`

    When the height is dynamic the number of visible records can vary, this is why the pageSize value has to ensure that whatever the size can be, the pageSize will always be larger than the number of visible records on the screen.

    Regards,
    Stefan
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top