Virtualization

The virtual scrolling provides an alternative to paging and it 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 MultiColumnComboBox requests and displays only the visible items.

Configuration

To enable the 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 MultiColumnComboBox.
  • pageSize—Indicates the size of the sub-set of data.
  • onPageChange—Provides the data for each page through the onPageChange event handler.

Observe the following rules:

  • The items in the popup list must have the same height. If the content of an item does not fit in the row, the height of this item will differ from the height of the other items.
  • The pageSize value must be equal or greater than the number of the visible pop-up items plus two.

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

Example
View Source
Change Theme:

Virtualization with Grouping

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

Example
View Source
Change Theme: