Dropdowns / MultiSelect / Getting Started
material theme

Getting Started with KendoReact MultiSelect

The KendoReact MultiSelect is a form component that displays a list of options and allows for multiple selections from this list and supports custom rendering of popup items and tags, header and footer elements, virtualization, and configurable options for controlling the list behavior.

The KendoReact MultiSelect is distributed through NPM under the kendo-react-dropdowns package.

The MultiSelect component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

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

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')
);

The MultiSelect component is part of KendoReact, a professionally built commercial UI library. To try out this component you need to sign up for a 30-day trial, which gives you access to the full KendoReact library.

Start Free Trial

Is this article helpful?

Not finding the help you need?

Contact Support