Kendo Grid Endless Scroll

[Alex]

Hi

I use a grid to show all items ordered by a customer.
This grid is reloaded with filtered remote data as soon as I select another customer. So far so fine.

The grid uses endless scrolling. Now, if I restrict to 200 records per page and I get 349 records as result, I can scroll to the end as expected and I get all the additional page(s).

But as soon as I've scrolled to the end of the list, the endless scroll feature seems to stop working. Loading the data of a new customer works fine but the grid doesn't scroll beyond record 200 and it doesn't load the next page.
Is there a way to reset the scroll endless behaviour and shouldn't this happen automatically when loading new data by filtering the data source?

Kind regards

Alex

[Alex]

I found a work around by re-assigning the scrollable:endless option every time I load new data.
It seems a bit weird as if the scrollable:endless option is removed as soon as the end of data is reached.  Why not just check, if the total number of records is fetched and then simply return doing nothing instead of fetching the next page. But not remove the scrollable option!

[Neli]

I am glad to hear you have managed to find a solution to the issue.

It should not be needed to add the scrollable:endless option every time a new data is loaded in the Grid. Here is a small example where the dataSource of the Grid is set using the setDataSource method and the endless scrolling works as expected. In case there are still issues on your side may I ask you to modify the example to replicate the behavior the way it is on your side and send it back? This way we could understand the scenario better and provide further assistance.

Regards,

Neli

[Alex]

Hi Neli thanks for your reply.
To reproduce the behavour I've modified the code:

https://dojo.telerik.com/@alex.bernhard/opIhEkos

Basically I've added a button to filter the records like:

<script>
      var exampleGrid;
      
      function filterData(){
        let filter = {};
        filter.logic = 'and';
        filter.filters = [];
        filter.filters.push({field:'UnitsInStock', operator:'gte', value:2});
        exampleGrid.dataSource.filter(filter);
      }

    </script>
<div class='k-button' onclick='filterData()'>Filter the data</div>

And changed the grid to filter server side. Now just run the example, you will get 77 records. Scroll to the very last record which works fine. Then filter the grid, you will get 72 records but you cannot scroll beyond the first page then.

Regards

Alex

[Neli]

Hi Alex,

Thank you for providing runnable example that demonstrates the issue.

You could try to refresh the Grid after the filter is applied. Here you will find the modified example. 

I hope this helps.

Regards,

Neli

[Alex]

Hi thanks for your reply,

does this work for you?
It doesn't work for me, refreshing the grid does not seem to solve the issue.

Regards

Alex

[Alex]

I can reset the internal property _endlessPageSize like:

function filterData(){
        let filter = {};
        filter.logic = 'and';
        filter.filters = [];
        filter.filters.push({field:'UnitsInStock', operator:'gte', value:2});
        exampleGrid.dataSource.filter(filter);      
        exampleGrid._endlessPageSize = exampleGrid.dataSource.options.pageSize; // reset internal_endlessPageSize
      }

Then it works as expected. This internal variable increments each time a new page is fetched but it is not reset, when I filter the data. This seems like a bug to me.

[Alex]

'Bug' in my previous comment is the wrong word. The problem is, the grid needs to react on new data loaded NOT because of paging but because a new filter object has been passed to its data source. As a quick solution a public method resetEndless() to reset the state could be added to the grid (and related widgets) and then used like

function filterData(){
        let filter = {};
        filter.logic = 'and';
        filter.filters = [];
        filter.filters.push({field:'UnitsInStock', operator:'gte', value:2});
        exampleGrid.dataSource.filter(filter);   
        exampleGrid.resetEndless();
      }

[Neli]

Hi Alex,

I am glad to hear you have managed to resolve the issue.

Filtering will work as expected with endless scrolling in Grid when the built-in filtering option is enabled - filterable:true

The described behavior is expected in scenarios when external filter is used. There is a private method _resetEndeless() that could be used as you suggested.

As it could be helpful to the other users in the Forum here is a link to the modified Dojo example.

Regards,

Neli