By default, the
height of the ListView depends on its content and its
width is determined by the available space or parent DOM element. To enable scrolling, you should define a fixed height that is less than the height of the ListView content.
The ListView provides two types of scrolling modes:
- Default Scrolling - Suitable for scenarios with a smaller number of data items. In this mode, all ListView data items are pre-rendered.
- Endless Scrolling - Suidable for scenarios with a lot of data. In this mode, all component's items are dynamically loaded based on the user's scrolling.
The following example demonstrates the ListView's default scrolling mode in action. In this scenario, the
width of the component are set with an inline style but the same can be implemented through a custom CSS class.
The Kendo UI for Vue Native ListView can achieve
endless scrolling allowing to dynamically display large collection of items.
The following example demonstrates the ListView that dynamically adds more items while the user scrolls, using the onScroll event.