Grid Paging with Virtual Scrolling

Environment

Product

Progress® Kendo® UI For Angular Grid

Description

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

This Knowledge Base article also answers the following questions:

• How to improve the performance of the Grid when showing thousands of records on a page?
• Why the Grid get stuck when performing data operations (filtering, sorting, grouping)?
• How to implement paging with virtual scrolling in the Grid?

Solution

Starting with Kendo UI for Angular 20.0.0, the Kendo UI for Angular Grid component supports both paging and virtual scrolling with both the kendoGridBinding directive and manual data binding. For more information, refer to the Virtualization with Paging section of the Grid documentation. If you are using an older version, or your scenario requires a custom solution beyond the built-in support, follow the steps below.

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. But you can create a custom pager with virtual scrollable Grid.

The following example demonstrates how to create a Grid with paging and virtual scrolling.

Change Theme

Theme

Loading ...

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 };

4. 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();
   }

5. 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,
       };
   }

6. 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();
       }

See Also

• Grid Overview
• API Reference of the Grid Component
• Grid Virtual Scrolling