Paging

The ListView provides built-in integration with the Kendo UI for Angular Pager component, which allows you to quickly set up the pager content and handle local data with the built-in page change.

To enable paging:

1. Set the pageable, pageSize, and skip options of the ListView.

2. Handle the page changes in either of the following ways:

• Use the built-in kendoListViewBinding directive. It handles page changes internally and works for local data only.
• Manually handle the pageChange event of the ListView. It is suitable for remote binding.

Binding Directive

To use the built-in binding directive, apply the kendoListViewBinding directive to the ListView. The directive selector accepts as a single argument a plain array of objects (any[]).

The following example demonstrates the directive in action.

Remote Binding

When you deal with a large data set, it's better to perform the paging on the server and fetch only parts of the data on demand.

To configure the ListView for such a scenario, you have to handle the following:

1. Provide the ListView data input with a ListViewDataResult object with the current batch of data items and information for the total number of records that are available on the server.
2. Hook to the pageChange event and manually update the pageSize and skip property values.
3. (Optional) Update the loading property value to render a loading indicator while the data is being fetched.

Pager Options

You can customize the built-in pager content according to the application needs. To configure the pager, pass a PagerSettings object to the pageable input of the ListView.

The PagerSettings object has the following fields:

• position—Sets the pager position relative to the ListView content section.
• pageSizeValues—Sets the list of drop-down values from which the end-user can choose for current page size. If the input is set to false, the page sizes drop-down will not be rendered.
• buttonCount—Sets the maximum numeric buttons count before the buttons are collapsed.
• info—Toggles the information about the current page and the total number of records.
• previousNext—Toggles the Previous and Next buttons.
• type—Accepts the numeric (buttons with numbers) and input (input for typing the page number) values.

Suggested Links

• API Reference of the ListViewComponent
• API Reference of the DataBindingDirective
• API Reference of the PagerSettings
• API Index of the ListView