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 other Angular components or DOM elements.
Starting with
v17.0.0, the TreeList's internal pager is replaced by the Pager component. The following breaking changes affect the pager template:
Deprecated Selector and Directives Updated Selector kendoTreeListPagerTemplatekendoPagerTemplatekendoTreeListFocusablekendoPagerFocusablekendo-treelist-pager-prev-buttonskendo-pager-prev-buttonskendo-treelist-pager-numeric-buttonskendo-pager-numeric-buttonskendo-treelist-pager-next-buttonskendo-pager-next-buttonskendo-treelist-pager-inputkendo-pager-inputkendo-treelist-pager-infokendo-pager-infokendo-treelist-pager-page-sizeskendo-pager-page-sizeskendo-treelist-pager-spacerkendo-pager-spacer
Using Built-in Pager Components
You can customize the Pager by using the following built-in elements exposed by the TreeList:
PagerInfoComponent—Shows information about the current page and the total number of records.PagerInputComponent—Displays an input element which allows typing and rendering of page numbers.PagerNextButtonsComponent—Displays buttons for navigating to the next and the last page.PagerNumericButtonsComponent—Displays numeric buttons for navigation between the pages.PagerPageSizesComponent—Displays a drop-down list for the page size selection.PagerPrevButtonsComponent—Displays buttons for navigating to the first and previous page.PagerSpacerComponent—Provides additional white space between the pager inner elements.
The following example demonstrates how to define the built-in pager components inside an <ng-template> tag with the applied kendoPagerTemplate directive.
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.
Implementing Keyboard Navigation
When you use only built-in Pager components in the Pager template, the default TreeList 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 kendoPagerFocusable 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.
Defining Spacing between the Pager Elements
The PagerSpacerComponent component allows you to add free space between the Pager's inner elements and arrange them. By default, each <kendo-pager-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.