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:
-
Set the
pageable,pageSize, andskipoptions of the ListView. -
Handle the page changes in either of the following ways:
- Use the built-in
kendoListViewBindingdirective. It handles page changes internally and works for local data only. - Manually handle the
pageChangeevent 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:
- Provide the ListView
datainput with aListViewDataResultobject with the current batch of data items and information for the total number of records that are available on the server. - Hook to the
pageChangeevent and manually update thepageSizeandskipproperty values. - (Optional) Update the
loadingproperty 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 tofalse, 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 thenumeric(buttons with numbers) andinput(input for typing the page number) values.