Paging

The ListView provides built-in integration with the Pager component, allowing for quick setup of the pager content and built-in page change handling for local data.

To enable paging set the pageable, pageSize, and skip options of the ListView. Then, there are two options how to handle page changes:

  • Use the built-in kendoListViewBinding directive - it handles page changes internally. Works only for local data.
  • Manually handle the pageChange event of the ListView. 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 single argument a plain array of objects (any[]).

The following example demonstrates the directive in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

Remote Binding

When dealing with a large data set, it's better to perform the paging on the server and fetch only parts of the data items on demand. To configure the ListView for such a scenario, several things have to be handled:

  • Provide to the ListView data input a ListViewDataResult object with the current batch of data items and information for the total number of records available on the server.
  • Hook to the pageChange event and update manually the pageSize and skip property values.
  • Optionally update the loading property value to render a loading indicator while the data is being fetched.

Pager Options

The built-in pager content can be customized 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 false is provided to this input, 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.

In this article

Not finding the help you need?