This sample demonstrates the Grid paging feature. In this sample, click the numeric items to navigate to particular page. You can also change the page size using the dropdown.
Order ID | Customer Name | Order Date | Freight | Ship Country |
|---|---|---|---|---|
| 10248 | Paul Henriot | 7/4/1996 | $32.38 | France |
| 10249 | Karin Josephs | 7/5/1996 | $11.61 | Germany |
| 10250 | Mario Pontes | 7/8/1996 | $65.83 | Brazil |
| 10251 | Mary Saveley | 7/8/1996 | $41.34 | France |
| 10252 | Pascale Cartrain | 7/9/1996 | $51.30 | Belgium |
| 10253 | Mario Pontes | 7/10/1996 | $58.17 | Brazil |
| 10254 | Yang Wang | 7/11/1996 | $22.98 | Switzerland |
| 10255 | Michael Holz | 7/12/1996 | $148.33 | Switzerland |
| 10256 | Paula Parente | 7/15/1996 | $13.97 | Brazil |
| 10257 | Carlos Hernández | 7/16/1996 | $81.91 | Venezuela |
| 10258 | Roland Mendel | 7/17/1996 | $140.51 | Austria |
| 10259 | Francisco Chang | 7/18/1996 | $3.25 | Mexico |
Paging allows you to display the contents of the Grid in page segments. By default, paging is disabled. To enable paging, set allowPaging property to true. pageSettings->pageSizes property enables a dropdown in pager which allows you to change the number of records in the Grid dynamically.
In this demo, the Grid is rendered with pageSettings->pageSizes set to true, and pageSettings->pageCount set to 4.
Changed default pager details information using the totalItemsInfo locale property.
Injecting Module:
Grid component features are segregated into individual feature-wise modules. To use paging feature, we need to inject PageService into the @NgModule.providers section.
The Pager component has been enhanced to be more responsive. It now includes the ability to automatically resize itself and dynamically show or hide pager items based on the width of the Grid
More information on the paging feature configuration can be found in this documentation section.