Grid scroll bar is ignored when dynamically filling data

4 posts, 1 answers
  1. John
    John avatar
    12 posts
    Member since:
    May 2019

    Posted 02 Apr Link to this post

    The grid scrollbar works nicely when the data is prepopulated however when filling the data from an event the scroll bar does not work.

     

    Here, from the documentation, the scrollbar works as intended:

    https://stackblitz.com/edit/react-el8uiz?file=app/main.jsx

    (via https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes/virtual/)

     

    However, when filling the grid on an event the scroll functionality is lost:

    https://stackblitz.com/edit/react-q2gnbn-yd3gsj?file=app/main.jsx

     

    Is there something I am missing here when populating the data via an event? I am not necessarily concerned with virtual scrolling, this also happens without virtual.

     

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3070 posts

    Posted 05 Apr Link to this post

    Hello, John,

    The issue occurs as the Grid scrollable functionality requires the Grid to have fixed height:

    https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes/#toc-getting-started

    You can configure the scrollable behavior through the scrollable option which also requires you to set the height of the Grid through its style property.

    In the provided example the height of 100% is not applied as not all parent DOM elements have height. Either set a fixed height or ensure that all elements have 100% height:

    https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window

    https://stackblitz.com/edit/react-q2gnbn-kqvosx?file=app/main.jsx

    Regards,
    Stefan
    Progress Telerik

    Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

  3. John
    John avatar
    12 posts
    Member since:
    May 2019

    Posted 05 Apr in reply to Stefan Link to this post

    Thanks... I had tried setting the parent height to 100% in my app but I was using it display: grid, it appears the Grid component will only work with display: block then?
  4. John
    John avatar
    12 posts
    Member since:
    May 2019

    Posted 05 Apr in reply to John Link to this post

    Nevermind, it works - needed to use 100% instead of auto for the row size.
Back to Top