React MultiColumn ComboBox

Overview

The React MultiColumn ComboBox provides a dropdown component that displays information about items in multiple fields arranged in columns. This gives end-users additional information associated with data items beyond the traditional list of a single-string text. Once a user selects an item, a single value will be displayed in the input. The KendoReact MultiColumn ComboBox comes with filtering, grouping, virtualization and more handy features.

See React MultiColumn ComboBox demo

React Multi-Column Combo Box component

Data Binding

The KendoReact MultiColumn ComboBox can be bound to various data types, including data created on the client-side as well as data pulled from the server-side. With simple configuration options, any collection of data can be bound to the React MultiColumn ComboBox and the component can be set up to display all fields or just a subset of the available fields. Additionally, developers have full control over the displayed field when a user selects an item, as well as defining whether the underlying value should be tied to a different field.

See React MultiColumn ComboBox Data Binding demo

Filtering

When filtering is enabled, the input element of the KendoReact MultiColumn ComboBox allows users to start typing a value and automatically reduces the number of available items based on the user input. Extremely useful when users navigate through large datasets, the filter feature can be enabled with a single configuration option.

See React MultiColumn ComboBox Filtering demo

React MultiColumn ComboBox Filtering

Grouping

When handling larger sets of data, it is very helpful to organize information in categories. With grouping enabled, the React MultiColumn ComboBox can group all data items by a particular field. The groups will be displayed in several ways throughout the list of items, which provides an intuitive user experience when scrolling through the data.

See React MultiColumn ComboBox Grouping demo

React Multi Column Combo Box Grouping

Virtualization

The KendoReact MultiColumn ComboBox comes with built-in virtualization, offering a significant performance boost for loading and displaying large datasets. With Virtualization enabled, only the currently displayed items are rendered within the MultiColumn ComboBox dropdown, letting additional data load as the user scrolls to a particular point within the available list.

See React MultiColumn ComboBox Virtualization demo

React MultiColumnComboBox Component Virtualization

Keyboard Navigation

The MultiColumn ComboBox has built-in keyboard support to help interact with, scroll through, and select data items using just the keyboard.

See React MultiColumn ComboBox Keyboard Navigation demo

Accessibility

Accessibility is a core aspect of the KendoReact suite. The KendoReact team understands how important accessibility is for the web and this drives us to make it an integral part of every component. The KendoReact MultiColumn ComboBox supports keyboard navigation and complies with Section 508 and WCAG 2.0 accessibility standards with an AAA rating.

See React MultiColumn ComboBox Accessibility demo

React MultiColumn Combo Box Component Accessibility

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.