Angular Grid Paging Basics
The Grid paging functionality enables you to split the whole data set into smaller portions, and to display only the items, corresponding to the current page. This vastly improves the performance in scenarios that involve large data sets. The Grid exposes a number of configuration options for customizing the look and feel of the paging feature.
Using the Data-Binding Directive
Тhe DataBinding
directive (kendoGridBinding
) performs paging automatically. To enable the paging when using a data-binding directive:
- Set the
pageable
option of the Grid. - Set the
pageSize
property to define the number of records per page.
<kendo-grid
[kendoGridBinding]="gridData"
[pageable]="true"
[pageSize]="5">
<kendo-grid-column field="CompanyName"></kendo-grid-column>
</kendo-grid>
The following example demonstrates the paging functionality with the kendoGridBinding
directive applied.
Further details on how the data binding directive works under the hood are available in the data operations with the built-in directive documentation section.