Paging

The TreeList enables you to split its content into pages.

Getting Started

To enable paging:

  1. Set the pageable attribute to true.
  2. Set the desired pageSize value.
Example
View Source
Edit In Stackblitz  
Change Theme:

Pager Types

The pager types of the Kendo UI TreeList for Angular are:

  • NumericThe default type. Renders buttons with numbers.
  • InputRenders an input filed for typing the page number.

To set the pager types, pass the PagerSettings object to the pageable option of the TreeList.

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.
  • typeAccepts the 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 3.0.0 the TreeList 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.

Pager Template

To further customize the pager appearance, use PagerTemplateDirective. The option enables you to take full control over the content of the pager item by mixing custom components and the built-in pager elements. For more information on how to define the pager template, refer to the PagerTemplateDirective API documentation.

Example
View Source
Edit In Stackblitz  
Change Theme: