New to Kendo UI for Vue? Start a free 30-day trial


Virtual scrolling provides an alternative to paging and is useful for displaying large sets of data.

The virtualization functionality uses a fixed amount of list items in the pop-up list of the component. While the user is scrolling the pop-up list, the MultiSelect requests and displays only the visible items.

To enable virtualization, configure the pagechange event and the composite virtual property which contains the following fields:

  • total—Represents the number of records.
  • skip—Represents the start of the sub-set of data which is loaded in the MultiSelect.
  • pageSize—Indicates the size of the sub-set of data.
  • onPageChange—Provides the data for each page through the onPageChange event handler.
  • In order for the virtualization to work properly, the items in the popup list must have the same height. If the content of an item does not fit in a single row, the height of this item will be different from the height of the other items.
  • You also need to make sure that the pageSize value is at least equal to the number of the visible pop-up items plus two.

Basic Configuration

The following example demonstrates how to set the virtualization of the MultiSelect.

View Source
Change Theme:

Virtualization with Filtering

If you use virtualization in your project alongside filtering, scrolling will be reset every time the value of the filter input is changed.

View Source
Change Theme: