Grid Performance & Virtual Scrolling

2 posts, 0 answers
  1. Edward
    Edward avatar
    3 posts
    Member since:
    Jan 2016

    Posted 26 Apr 2016 Link to this post

    We're looking to improve the performance of the KendoUI Grid when rendering large data sets with client filtering & pagination. Is it possible to get virtual scrolling with client side pagination, where the scrolling is finite and limited to the current page size (yet still takes advantage of the virtual rendering).

    Essentially, we want to take advantage of the virtual DOM rendering, but not the infinite scrolling and data fetching. Otherwise, is there a way to override the renderer to use another rendering library.

    Also, is there a way to dynamically set the pageSize depending on the maximum number of visible rows. I.e.

    pageSize = Math.floor(gridHeight / rowHeight)
  2. Alexander Valchev
    Alexander Valchev avatar
    2895 posts

    Posted 28 Apr 2016 Link to this post

    Hello Edward,

    It is possible to have virtual scrolling with client side paging but it is not possible to limit the scrolling to the current page. The pageSize determines the size of the data chunk that will be loaded.

    If you want to limit the amount of records that will be loaded just pass them as data to the DataSource. For example if you have total 1000 records but want to make a finite scrolling to 500 records with 50 pageSize, you have to set the pageSize of the dataSource to 50 and the data of the dataSource to the first 500 records of the 1000 records data set.

    If you want to change the amount of the data you may use the data method of the DataSource to replace the current 500 records with others.

    I would not recommend overriding the render method. The pageSize should not be exactly the same amount as the currently visible rows. In order to get a smooth scrolling you will need a pageSize bigger than the amount of records that the users sees.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top