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:
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.
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 (
The following example demonstrates the directive in action.
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 a
ListViewDataResultobject 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 the
- (Optional) Update the
loadingproperty value to render a loading indicator while the data is being fetched.
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.
numeric(buttons with numbers) and
input(input for typing the page number) values.