Kendo Grid Endless Scroll

1 Answer 33 Views
Data Source Grid
Alex
Top achievements
Rank 1
Iron
Alex asked on 03 May 2022, 11:44 AM

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
Top achievements
Rank 1
Iron
commented on 03 May 2022, 12:05 PM

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
Telerik team
commented on 06 May 2022, 07:15 AM

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

1 Answer, 1 is accepted

Sort by
0
Alex
Top achievements
Rank 1
Iron
answered on 06 May 2022, 07:38 AM

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
Telerik team
commented on 11 May 2022, 05:44 AM

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
Top achievements
Rank 1
Iron
commented on 11 May 2022, 06:40 AM

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
Top achievements
Rank 1
Iron
commented on 11 May 2022, 10:43 AM

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
Top achievements
Rank 1
Iron
commented on 12 May 2022, 05:04 AM

'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
Telerik team
commented on 16 May 2022, 06:12 AM

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

Tags
Data Source Grid
Asked by
Alex
Top achievements
Rank 1
Iron
Answers by
Alex
Top achievements
Rank 1
Iron
Share this question
or