MultiSelect Overview
The MultiSelect is a form component that displays a list of options and allows for multiple selections from this list.
It is a richer version of the <select> element and supports custom rendering of popup items and tags, header and footer elements, virtualization, and configurable options for controlling the list behavior.
Basic Usage
The following example demonstrates the MultiSelect in action.
import React from 'react';
import ReactDOM from 'react-dom';
import { MultiSelect } from '@progress/kendo-react-dropdowns';
const sports = [ "Baseball", "Basketball", "Cricket", "Field Hockey", "Football", "Table Tennis", "Tennis", "Volleyball" ];
class AppComponent extends React.Component {
state = { value: [] };
onChange = (event) => {
this.setState({
value: [ ...event.target.value ]
});
}
render() {
return (
<div className="example-wrapper">
<div>
<div>Favorite sports:</div>
<MultiSelect
data={sports}
onChange={this.onChange}
value={this.state.value}
/>
</div>
</div>
);
}
}
ReactDOM.render(
<AppComponent />,
document.querySelector('my-app')
);
Functionality and Features
- Data and value binding
- Custom values
- Filtering
- Custom tags
- Custom rendering
- Virtualization
- Floating labels
- Forms support
- Globalization
- Keyboard navigation
- Accessibility
Events
The following example demonstrates basic MultiSelect events.
import React from 'react';
import ReactDOM from 'react-dom';
import { MultiSelect } from '@progress/kendo-react-dropdowns';
import countries from './countries';
class AppComponent extends React.Component {
state = { events: [] };
onOpen = () => { this.log('open'); }
onClose = () => { this.log('close'); }
onFocus = () => { this.log('focus'); }
onBlur = () => { this.log('blur'); }
onChange = (event) => { this.log('change', event.target.value); }
onFilterChange = (event) => { this.log('filterChange', event.filter.value); }
render() {
return (
<div>
<MultiSelect
data={countries}
onOpen={this.onOpen}
onClose={this.onClose}
onFocus={this.onFocus}
onBlur={this.onBlur}
onChange={this.onChange}
onFilterChange={this.onFilterChange}
filterable={true}
style={{ width: '400px' }}
/>
<br />
<br />
<EventsLogger events={this.state.events} />
</div>
);
}
log(event, arg) {
const events = this.state.events;
events.unshift(`${event} ${arg || ""}`);
this.setState({
events: events
});
}
}
class EventsLogger extends React.Component {
render() {
return (
<div className="example-config">
<h5>Event log</h5>
<ul className="event-log" style={{ textAlign: 'right' }}>
{this.props.events.map(function(event, index) {
return (<li key={index}>{event}</li>);
})}
</ul>
</div>
);
}
}
ReactDOM.render(
<AppComponent />,
document.querySelector('my-app')
);
export default [
"Albania",
"Andorra",
"Armenia",
"Austria",
"Azerbaijan",
"Belarus",
"Belgium",
"Bosnia & Herzegovina",
"Bulgaria",
"Croatia",
"Cyprus",
"Czech Republic",
"Denmark",
"Estonia",
"Finland",
"France",
"Georgia",
"Germany",
"Greece",
"Hungary",
"Iceland",
"Ireland",
"Italy",
"Kosovo",
"Latvia",
"Liechtenstein",
"Lithuania",
"Luxembourg",
"Macedonia",
"Malta",
"Moldova",
"Monaco",
"Montenegro",
"Netherlands",
"Norway",
"Poland",
"Portugal",
"Romania",
"Russia",
"San Marino",
"Serbia",
"Slovakia",
"Slovenia",
"Spain",
"Sweden",
"Switzerland",
"Turkey",
"Ukraine",
"United Kingdom",
"Vatican City"
];