Angular DataGrid - paging

Specifies paging options.

Type:

Object

In DataGrid, records can be loaded either page by page or all at once. Needless to say that the latter approach affects grid performance, especially when the number of loading records is very large. If you, however, want to use it, disable paging by setting the paging.enabled option to false.

When paging is on, you can specify the size of grid pages using the pageSize option. Additionally, if you require displaying grid records starting with a certain page, assign its index to the pageIndex option.

A paginated grid can be navigated by a user at runtime. For this purpose, he or she can use a pager or scrolling.

View Demo

See Also

enabled

Specifies whether DataGrid loads data page by page or all at once.

Type:

Boolean

Default Value: true

When this option is set to true, data from the source is loaded page by page improving the performance of the DataGrid widget. The size of the pages is defined by the pageSize option. To navigate through pages, use scrolling or the pager navigation.

If you prefer loading all data from your source at once, disable paging by setting the paging.enabled option to false.

pageIndex

Specifies the grid page that should be displayed by default.

Type:

Number

Default Value: 0

When this option is not specified, a grid displays records starting from the first page. If you need to specify a particular page to start displaying from, assign the index of this page to the pageIndex option.

NOTE
The page index is one less than the page number displayed by the pager. Thus, the first page has 0 index, the second - 1, etc.

In addition, you can set or get the current page index from code using the pageIndex method called with or without the argument.

See Also

pageSize

Specifies the size of grid pages.

Type:

Number

Default Value: 20

When data in a grid is loaded page by page, you can specify how many items a page must contain by setting the pageSize option. Once the page size is set, it can be changed at runtime using the page size selector, which can be made visible by setting the pager.showPageSizeSelector option to true. To specify page sizes that can be selected, use the pager.allowedPageSizes option.

In addition, you can set or get the page size from code using the pageSize method called with or without the argument.