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 Angular 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:
- Set the
pageable,pageSize, andskipproperties. - Handle either of the following events:
pageChangeevent—Use this event when you enable only the paging data operation.dataStateChangeevent—Use this event when you enable more than one data operation, for example, paging and filtering. For more details, check the section on how to handle multiple data operations.
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
dataStateChangeevent instead ofpageChangeand use theprocess()method. 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.
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.