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.
- Use the built-in
kendoListViewBindingdirective - it handles page changes internally. Works only for local data.
- Manually handle the
pageChangeevent of the ListView. Suitable for remote binding.
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 (
The following example demonstrates the directive in action.
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
ListViewDataResultobject with the current batch of data items and information for the total number of records available on the server.
- Hook to the
pageChangeevent and update manually the
- Optionally 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
falseis 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.