• Introduction
  • Getting Started
  • Native Components
    • Animation
    • Buttons
    • Charts
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Gridupdated
    • Iconsnew
    • Indicatorsupdated
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxnew
    • ListViewnew
    • Notification
    • PDF Processing
    • Popup
    • Progress Barsupdated
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeListnew
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting
New to Kendo UI for Vue? Start a free 30-day trial

Scroll Modes

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.

Default Scrolling

The following example demonstrates the ListView's default scrolling mode in action. In this scenario, the height and width of the component are set with an inline style but the same can be implemented through a custom CSS class.

View Source
Change Theme:

Endless Scrolling

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.

View Source
Change Theme:

In this article

Not finding the help you need?