Last Updated: 01 Jun 2020 10:49 by ADMIN
Created on: 29 May 2020 14:33
Category: Grid
Type: Feature Request
allow each row define its own height in row virtualization in Grid

row height set in grid definition must apply to all rows in the grid for row virtualization as of now. 

in real business case there might be complex content in each row that can't reinforce this - but if each row report its own height, grid still can visualize the load, and it will be much more flexible. 

1 comment
Marin Bratanov
Posted on: 01 Jun 2020 10:49

Hello Wei,

This explanation might be a little long-winded, so please bear with me.

I must begin with a few core concepts of how virtualization works:

  • It does not have all the data, it has only the data for the currently rendered page. This is important because it is a key performance optimization for the data source - it lets you use OnRead to fetch chunks of data instead of the entire database - this reduces both the load on the database, and on the memory of the app.
  • They way the offset is calculated relies on rows having the same height so you can know how tall the current chunk of data is, how tall all the data would be if it were rendered, and how far you have scrolled. This also allows setting a scroll offset (Skip) programmatically.
  • Row virtualization is a performance optimization technique and every such optimization will have some drawbacks. This is different than paging and than "endless scrolling" where new items are rendered without regard for their size. With virtual scrolling you only have a subset (the current Page) rendered, and those DOM elements are reused and filled in with new data so that you don't fetch all the data, you don't keep it in memory, and you don't increase the footprint in the browser (like endless scrolling would).

Here are a couple of problems if each row could have different height:

  • Having that in the view-model might not be enough because CSS rules on one page/app could alter that height.
  • The grid does not have all the data, so it cannot calculate the total height of the items, which means the user won't see a correct scrollbar.
  • Setting an offset (skip) programmatically would not work because the grid can't know how far it must scroll - the height of the skipped items is undefined because they are not in the data.
  • Fetching a new set of items is unclear because its height is also unknown - so the grid can't know whether the current scroll offset is correct or not, and how to compensate for that.

I hope this explains the situation in sufficient detail and clarifies why rows must have a defined height.

Lastly, the fact that some other vendors may not mention this explicitly in their documentation, does not mean that the requirement does not exist with them either. We do try to provide comprehensive docs so you don't have to fumble through issues at a later date. That said, feel free to open a ticket and show us a sample of how that works in another solution.

Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.