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

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.

Example
View Source
Change Theme:

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.
Example
View Source
Change Theme:

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:

  • positionSets the pager position relative to the ListView content section.
  • pageSizeValuesSets 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.
  • buttonCountSets the maximum numeric buttons count before the buttons are collapsed.
  • infoToggles the information about the current page and the total number of records.
  • previousNextToggles the Previous and Next buttons.
  • typeAccepts the numeric (buttons with numbers) and input (input for typing the page number) values.
Example
View Source
Change Theme: