We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ListView Virtualization Resize/Scroll issue.

Thread ID:

Created:

Updated:

Platform:

Replies:

145390 Jun 19,2019 08:03 PM UTC Jun 21,2019 12:27 PM UTC Angular - EJ 2 3
loading
Tags: ListView
Tyler Guyn
Asked On June 19, 2019 08:03 PM UTC

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 [Syncfusion]
Replied On June 20, 2019 01:25 PM UTC

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
Replied On June 20, 2019 02:56 PM UTC

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

Christopher Issac Sunder K [Syncfusion]
Replied On June 21, 2019 12:27 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon