New to Kendo UI for Angular? Start a free 30-day trial

Grid Paging with Virtual Scrolling

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)?

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:

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

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.

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

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

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

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

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

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

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

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

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

Grid Paging with Virtual Scrolling

Environment

Description

Solution

See Also