Triggering virtualization scroll

[Boris]

Hi there,

I'd like to trigger the virtualization scroll event programatically. My idea is to use a global body scroller to register the scroll down, and completely turn off the scroller on the listview container.

When I use the following code it will only replace my existing rows.

$("#allProductsListView").data("kendoListView").dataSource.read({ page: 2, pageSize: 36 })

I need a way to append in order to make virtualization work programatically.

Thank you.

[Mihaela]

Hi Boris,

Generally, the ListView component does not support virtualization. For more information on the available scrolling modes, check out the following article:

https://docs.telerik.com/aspnet-core/html-helpers/data-management/listview/scrolling

You could try scrolling the scrollbar, as suggested in this forum thread.

For example:

var listView = $("#listView").data("kendoListView");
var newPageNumber = 2;
var rowHeight = $("#listView .k-listview-item").eq(0).height(); //Get the height of the ListView elements.
var pageSize = listView.dataSource.pageSize(); //Get the specified page size.
$(".k-listview-content").scrollTop(rowHeight * pageSize * (newPageNumber - 1)); //use the jQuery scrollTop() method to set the vertical position of the scroll bar.

Also, you can change the current page programmatically by calling the page() method of the DataSource:

$("#allProductsListView").data("kendoListView").dataSource.page(2);

I hope that helps.

 

Regards, Mihaela Progress Telerik

[Boris]

Hi Mihaela,

so basically I want to achieve behaviour like this, but programatically: https://demos.telerik.com/aspnet-core/listview/endless-scrolling

If I use the following line of code

$("#allProductsListView").data("kendoListView").dataSource.page(2);

results from the page 1 will disappear. I would like to append to the results from page 1. Let me know if this is possible.

[Mihaela]

Thank you for your clarifications.

To achieve the desired result, you could follow the approach suggested in the following KB article:

https://docs.telerik.com/kendo-ui/knowledge-base/load-and-append-records

I have prepared a REPL sample for the ListView component based on it:

https://netcorerepl.telerik.com/mnaWRbOi53qgvo9d32

 

[Boris]

This does the job, but it's not what I am looking for.

I would like to achieve it without incrementing the page size (it should be constant). Sure, it will work fine when loading first 36 records, but with scrolling I could reach couple of thousands of records and I don't want the app performance to suffer.

I'd like to have a call like in the image below.

I can do it by using query function but this will delete all of the rows from page 1.

Is there any way to do the query and preserve the results from the previous pages?

$("#allProductsListView").query({ page: 2, pageSize: 36 });

[Mihaela]

Since the ListView does not support virtualization, I am afraid the required scenario cannot be achieved with the current implementation of the component.

I would recommend using Grid component with row template and virtualization.

On a side note, if you would like to request the feature to be included out of the box for the ListView, I can suggest submitting a request in our Public Feedback Portal. Based on the traction the request gathers with the community, the developers will consider implementing it in a future release.