Grid Paging with Virtual Scrolling

Environment

Product

Progress® Kendo UI Grid

Description

How can I implement paging along with virtual scrolling in Grid?

Solution

There are cases when the Grid needs to load millions of records split into several pages. Rendering a page with a certain amount of records may reduce the performance of the Grid and virtualization is needed for each page.

The paging and virtual scrolling features of the Grid, rely on the same events (pageChange, dataStateChange) to update the data. That is why the Grid cannot use both mechanisms at the same time.

To implement virtual scrolling of the Grid pages:

1. Enable the virtual scrolling mode of the Grid, by following our Virtual Scrolling Getting Started article.

2. To override the default pager of the Grid, use the built-in ToolbarTemplateDirective and set its position property to bottom. Inside the template, implement the Pager component.

   ts

   <ng-template kendoGridToolbarTemplate position="bottom">
       <kendo-datapager
           [pageSize]="pagerState.take"
           [skip]="pagerState.skip"
           [total]="total"
           [type]="'numeric'"
           (pageChange)="onPagerChange($event, grid)">
       </kendo-datapager>
   </ng-template>

3. In the app.component.ts create two State objects that hold the skip and take properties for the virtual scrolling and Pager configurations.

ts

    public gridData: GridDataResult;
    public data: any[]; // 500 000 items
    public slicedData: any[]; // 250 items per page

    public gridState: State = { skip: 0, take: 50 };
    public pagerState: State = { skip: 0, take: 250 };

1. Handle the pageChange event of the Pager component. Update the corresponding skip and take properties and slice the data.

   ts

   public onPagerChange(e: PageChangeEvent, grid: GridComponent) {
       this.pagerState.skip = e.skip;
       this.pagerState.take = e.take;
       this.sliceTotalData();
   }
   
   public sliceTotalData() {
       this.slicedData = this.data.slice(
       this.pagerState.skip,
       this.pagerState.skip + this.pagerState.take
       );
       this.loadProducts();
   }

2. To load the sliced collection in the Grid, update the data and total properties of the GridDataResult object:

   ts

   private loadProducts(): void {
       this.gridData = {
           data: this.slicedData.slice(
           this.gridState.skip,
           this.gridState.skip + this.gridState.take
       ),
           total: this.slicedData.length,
       };
   }

3. Finally, handle the pageChange event of the Grid and update the corresponding skip and take properties to configure the virtual scrolling.

ts

    public pageChange(event: PageChangeEvent): void {
        this.gridState.skip = event.skip;
        this.loadProducts();
    }

The following example demonstrates the suggested approach.

Change Theme

Theme

Loading ...