Kendo UI JQuery ListView Virtualization

[Lee]

I am trying to virtualize a Kendo UI JQuery list view with local data.

I also made my own Dojo here but it doesn't work. The problem with mine is that it is still creating all of the items, not just the first 5. Any idea how to fix this?

[Georgi Denchev]

Hello, Lee,

The closest built-in functionality that you could use is the Endless scroll:

https://demos.telerik.com/kendo-ui/listview/endless-scrolling 

If you wish to implement virtualization you'll have to do it on your own. Generally, for components that can be virtualized(like the Grid), we still use the `pageSize` configuration.

The idea is that when you hit a certain scroll threshold, you should fetch the next X amount of records. This is similar to when you're using regular paging but instead of changing the page by clicking on a link, you do it by scrolling down.

I am not sure how complex the task would be for the ListView. While it is true that it has less features compared to the Grid, it might still be quite challenging to add the functionality.

Best Regards,
Georgi Denchev
Progress Telerik

[Lee]

Thank you very much. I called it virtualization but I think this is exactly what I was looking for instead. Here is a Dojo for anyone interested in doing it with a local dataSource: Dojo

[Georgi Denchev]

Hi, Lee,

Thank you for sharing an updated Dojo sample for others that may need it!

In case anybody else stumbles across the conversation and wonders about the difference between what we call virtualization and what we call endless scrolling, here it is:

Virtualization -> The scrollbar looks much bigger. It has the combined height of all records. When you reach a new "page", the old X amount of elements in the DOM are removed and new X records are appended. So at all times you have only lets say 50 records(the number is equal to the dataSource page size).

 

Endless -> The scrollbar appears much smaller as it only takes into consideration the existing elements on the page. When you reach a new "page", X amount of records are appended, but the previous ones remain as well. This means the DOM keeps growing infinitely (or until you reach the last record to be more precise).

Best Regards,

Georgi