New to KendoReactStart a free 30-day trial

Virtualization

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 onPageChange 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 set to twice the number of visible items in the Popup.

Basic Configuration

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

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...

Virtualization with Grouping

The below example shows how we can use the MultiSelect in a scenario with Grouping and Virtualization.

Change Theme
Theme
Loading ...