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

Pager Template

To take full control over the pager layout, content, and functionality, use the PagerTemplateDirective. It allows you to mix and match built-in Pager building blocks with any other Angular components or DOM elements.

Using Built-in Pager Components

You can customize the Pager by using the following built-in elements exposed by the Grid:

The following example demonstrates how to define the built-in pager components inside an <ng-template> tag with applied kendoPagerTemplate directive.

Example
View Source
Change Theme:

Using Other Components

In some scenarios, the built-in pager elements do not entirely meet your requirements. In such cases, the PagerTemplateDirective enables you to use any set of Angular components and DOM elements that fit the specific use case.

The following example demonstrates how to use the Kendo UI for Angular Slider to paginate the data.

Example
View Source
Change Theme:

Implementing Keyboard Navigation

When you use only built-in Pager components in the Pager template, the default Grid keyboard navigation will work out-of-the-box.

To preserve the keyboard navigation functionality when using other Angular components or focusable HTML elements in the Pager template, place the kendoGridFocusable directive on each focusable element.

The following example demonstrates how to use a Slider component for changing the page and an HTML Input element for setting the page size.

Example
View Source
Change Theme:

Defining Spacing between the Pager Elements

The GridSpacer component enables you to add free space between the Pager's inner elements and arrange them. By default, each <kendo-grid-spacer> element occupies all available space. To override this behavior and specify a custom size, use the width property.

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

Example
View Source
Change Theme: