The TreeList enables you to split its content into pages.
To enable paging:
To configure the TreeList pager, pass the PagerSettings object to the pageable option of the TreeList.
PagerSettings object has the following fields:
- buttonCount—Sets the maximum numeric buttons count before the buttons are collapsed. Defaults to
- countChildren—Indicates if child nodes should be fetched and counted for the pager total. By default, the TreeList will fetch all children when paging is enabled. Set this option to
falseto disable this behavior.
- info—Toggles the information about the current page and the total number of records. Defaults to
- pageSizes—Shows a menu for selecting the page size. Defaults to
- previousNext—Toggles the Previous and Next buttons. Defaults to
- type—Defines the type of the TreeList pager. The available values are
'numeric'(buttons with numbers) and
'input'(input for typing the page number) values. Defaults to
- responsive—Toggles the built-in responsive behavior. Defaults to
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
PagerSettings object to
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.
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.
The TreeList package exposes the following built-in Pager components:
- 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 - Buttons for navigating to the next and last page.
- PagerNumericButtonsComponent - Numeric buttons for navigation between the pages.
- PagerPageSizesComponent - Displays a drop-down list for the page size selection.
- PagerPrevButtonsComponent- Buttons for navigating to the first and previous page.
- TreeListSpacer - Provides additional white space between the pager inner elements.
The following example demonstrates how to define a pager template.
Define Spacing between the Pager Elements
The TreeListSpacer enables you to define spacing between the pager inner elements and arrange them in accordance with your preference. By default, each
The following example demonstrates how to position the numeric buttons at the center of the available Pager space.