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

Angular Grid Manual Paging

The manual paging gives the developer full control over the paging of the data records. Compared to the paging with the built-in directive, the manual approach provides greater transparency of the paging process because it requires you to handle the Grid events manually. The manual paging is especially useful when you require additional customization of the paging logic.

When you enable the Grid paging functionality, you must also bind the component's data property to a GridDataResult object. This object must contain information about the total number of records and the portion of items corresponding to the current page.

@Component({
    template: `
      <kendo-grid [data]="gridView" ... ></kendo-grid>
    `
})
export class AppComponent {
    public gridView: GridDataResult;
}

To enable paging:

  1. Set the pageable, pageSize, and skip properties.
  2. Handle either of the following events:

The steps above are identical regardless if you process the data locally or send a request to the server to paginate the data.

Paging Local Data

To paginate local data, use the Array slice method or the built-in process() function of the Data Query package.

When other data operations like sorting, filtering, or grouping, are also enabled, handle the dataStateChange event instead of pageChange. For more details, check the section on how to handle multiple data operations.

The following example demonstrates how to use the Array slice method in the pageChange event handler to paginate the Grid data.

Example
View Source
Change Theme:

Paging on the Server

Handle the pageChange or dataStateChange event to send a request containing information about the current Grid state to the server. For more details, check the section on how to handle multiple data operations using remote data.

In this article

Not finding the help you need?