Free Trial Buy

pager

Specifies the options of a grid pager.

Type:

Object

A pager is a grid element that allows the user to navigate through grid pages and change their size at runtime. By default, the pager is visible if paging is enabled and you do not use virtual or infinite scrolling. To change the pager's visibility explicitly, use its visible option.

The pager consists of a page navigator and a page size selector. The page navigator contains the numbers of pages. Clicking a page number navigates the user to the page. The page size selector contains the page sizes that can be selected. They are specified by the allowedPageSizes option of the pager configuration object. The page size selector is hidden by default. To make it visible, assign true to the pager's showPageSizeSelector option.

View Demo Watch Video

allowedPageSizes

Specifies the page sizes that can be selected at runtime.

Type:

Array<Number>

|

String

Default Value: 'auto'
Accepted Values: 'auto'

When a grid displays data page by page, you can specify the default size of pages using the pageSize option. Additionally, you can enable a user to change the page size at runtime. To do this, make the page size selector visible by setting the pager.showPageSizeSelector option to true. After that, specify the sizes that can be selected in it by assigning an array of these sizes to the pager.allowedPageSizes option. If you do not specify this option, the allowed page sizes will be determined automatically depending on how large the grid data source is.

See Also

infoText

Specifies the text accompanying the page navigator.

Type:

String

Default Value: 'Page {0} of {1} ({2} items)'

Use the 0, 1, and 2 position markers to show the current page number, total page count, and total item count respectively. Place each of them within curly braces.

showInfo

Specifies whether or not to display the text accompanying the page navigator. This text is specified by the infoText option.

Type:

Boolean

Default Value: false

showNavigationButtons

Specifies whether or not to display buttons that switch the grid to the previous or next page.

Type:

Boolean

Default Value: false

Although the page navigator already contains clickable page numbers, you can also supply it with buttons that navigate a user to the previous or next page. To do this, set the showNavigationButtons option to true.

See Also

showPageSizeSelector

Specifies whether to show the page size selector or not.

Type:

Boolean

Default Value: false

If you want a user to be able to change the page size at runtime, make the page size selector visible by setting the showPageSizeSelector option to true. Note that the pager should be visible as well, because the page size selector is a part of it. To specify page sizes that can be selected, set the allowedPageSizes option.

See Also

visible

Specifies whether to show the pager or not.

Type:

String

|

Boolean

Default Value: 'auto'
Accepted Values: 'auto' | true | false

If a grid displays records page by page, the pager is visible by default. Otherwise, it is hidden. However, you can show/hide the pager when you require using the pager.visible option.