Fire dataStateChange when scroll to bottom

[Alexandra]

Hello,

I use Kendo UI and i have a grid with server side filtering and sorting with a custom directive for loading the data. The problem i have is that i want to trigger dataStateChange when i scroll to bottom to make a request and fetch the data on the next page. The grid still fires the directive dataStateChange when i filter or sort, but not when i scroll to bottom. I know that dataStateChange fires when i press a button in pagination, but i want to implement this on scroll.

 

The header of the kendo grid

 <kendo-grid inventoryBinding (dataStateChange)="dataStateChange($event)" (scrollBottom)="loadMore()" [filterable]="true" [sortable]="true" [navigable]="true" height="400">

 

My directive is implmented just like in this example: 

https://stackblitz.com/edit/angular-66vvau?file=src%2Fapp%2Fapp.component.ts

 

Thank  you in advance for your answer!

[Dimiter Topalov]

Hello Alexandra,

The Grid has a dedicated scrollBottom event that can be used to perform the desired remote requests:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/#toc-endless-scrolling

Note that typically the endless scrolling mechanics is an alternative to paging and virtual scrolling, and appends new items to the already existing Grid data.

If you need virtual scrolling instead (only a page-size number of items are displayed at any given point), this can be achieved as described in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/scroll-modes/virtual/

To sum up - regular paging, endless scrolling, and virtual scrolling are alternatives to one another and cannot be used together. The paging functionality is the regular pagination using Pager UI that is already used in the example.

The virtual scrolling is very similar and also relies on the pageChange/dataStateChange event to load the next portion of the data, but this event is triggered when the end user is scrolling the Grid instead of pressing the Pager page number buttons.

The endless scrolling does not paginate the data, but rather adds new items to the existing ones when the enduser scrolls to the bottom of the page. This can potentially lead to performance issues when the data items, rendered in the Grid, are too many.

It is also worth mentioning that when using the databinding directive, there is no need to bind all skip, filter, sort, and group options of the Grid, and also to handle the various data-processing related events (like the dataStateChange event). Handling the events and updating the state manually beats the purpose of using an auto-binding directive:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-binding/automatic-operations/#toc-data-binding-directives

https://stackblitz.com/edit/angular-38g1bq?file=src/app/app.component.ts

When using a custom databinding directive, the developer can still access all events of the host (Grid) component, and perform any necessary custom logic accordingly, for example:

public ngOnInit(): void {
        this.serviceSubscription = this.products.subscribe((result) => {
            this.grid.loading = false;
            this.grid.data = result;
            this.notifyDataChange();
        });

        super.ngOnInit();

        this.grid.scrollBottom.subscribe(() => this.onScroll())

        this.rebind();
    }

private onScroll = () => {
      // perform any desired service call here
      alert('scrolled to bottom')
    }

https://stackblitz.com/edit/angular-c9p4pw?file=src/app/remote-binding.directive.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik