ListView Virtualization Resize/Scroll issue.

[Tyler Guyn]

We're currently having an issue with using virtualization on a ListView control. Currently when you have a list item which is taller than the initial list item it is causing issues with scrolling. For our current solution there is an issue where when the scroll bar bounces back up, it will display the list item above it (which is currently in the process of being removed) and causes a flicker/scroll problem and sometimes causes the browser to hang. We are currently testing this in Chrome, but Edge has a similar issue. 

See below for an example we came up with using the demo code provided:

Test case: Casually scroll past the first list item, notice that the scroll bar jumps up/hangs when scrolling past the 2nd list item, which has a bigger height than the first. Eventually, the scroll will allow you to move past that item, but it takes about 5-10 scrolls to move down the list. See stackblitz example below:

https://stackblitz.com/edit/angular-qbwywe

[Christopher Issac Sunder K]

Hi Tyler, 

 

Thank you for contacting Syncfusion support. 

 

We have analyzed your query. When you want to use virtualization mode in listview, each list item height should be in uniform format. otherwise this issue will be occurred. Because the virtualization mode was applied based on the listview height only. This is the limitation of virtualization mode in listview component. 

 

Please let us know if you have any concerns. 

 

Thanks, 

Christo 

[Jesse Cates]

So does this mean that there's no way to have a responsive ListView, if using virtualization?

[Christopher Issac Sunder K]

Hi Tyler,  

Thanks for the update. 

The EJ2 Listview Virtualization type is UI Virtualization that means when we scroll down only the content we see in the listview will be replaced, while element will stay in the DOM and will be reused for the displaying future data on scrolling. This is the basic architecture of the Virtualization in EJ2 Listview. 

This type of listview can handle large amount of data and it is less DOM intensive as not much thing will be frequently manipulated in DOM like other methods. But this method comes with limitations too like others, the important factor is total height of the Listview and individual list item height, based on these values only we can predict the list item at a given scrollbar position, so it is not possible to have variable item height as we cannot determine what item to display on scrolling. 

Please let us know if you have any concerns. 

Thanks,
Christo