New to Kendo UI for Angular? Start a free 30-day trial

Paging

The Grid enables you to split its content into pages.

Getting Started

To enable paging:

  1. Set the pageable, pageSize, and skip options of the Grid.
  2. Handle the emitted pageChange event.
  3. Manually paginate the data.
Example
View Source
Edit In Stackblitz  
Change Theme:

Pager Settings

To configure the Grid pager, pass the PagerSettings object to the pageable option of the Grid.

The PagerSettings object has the following fields:

  • buttonCountSets the maximum numeric buttons count before the buttons are collapsed. Defaults to 10.
  • infoToggles the information about the current page and the total number of records. Defaults to true.
  • pageSizesShows a menu for selecting the page size. Defaults to false.
  • previousNextToggles the Previous and Next buttons. Defaults to true.
  • typeDefines the type of the Grid pager.The available values are 'numeric' (buttons with numbers) and 'input' (input for typing the page number) values. Defaults to 'numeric'.
  • responsiveToggles the built-in responsive behavior. Defaults to true.
Example
View Source
Edit In Stackblitz  
Change Theme:

Responsive Pager

Since version 5.0.0 the Grid pager features the same responsive functionality as the Pager component. The responsive Pager is enabled by default. To disable the responsive functionality, set the responsive property of the PagerSettings object to false.

When the Pager template is used, the default responsive behavior is disabled, as the developer has full control over the Pager content.

The following example demonstrates the responsive Pager in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Pager Template

To further customize the pager appearance, use PagerTemplateDirective. It enables you to take full control over the content of the pager by mixing custom components and the built-in pager elements.

The Grid package exposes the following built-in Pager components:

The following example demonstrates how to define a pager template.

Example
View Source
Edit In Stackblitz  
Change Theme:

Define Spacing between the Pager Elements

The GridSpacer enables you to define spacing between the pager inner elements and arrange them in accordance with your preference. By default each kendo-grid-spacer element occupies all available space. To override this behavior and specify a custom size, you could utilize the width property.

The following example demonstrates how to position the numeric buttons at the center of the available Pager space.

Example
View Source
Edit In Stackblitz  
Change Theme: