Custom Values

The MultiSelect supports the implementation of custom values.

To configure the MultiSelect to accept custom values, set the allowCustom property to true. To insert a custom value, type a random value in the MultiSelect and confirm it by pressing Enter.

Primitive Values

The following example demonstrates how to allow custom values when the MultiSelect is bound to an array of primitive values.

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: [] };

    handleChange = (event) => {
        const values = event.target.value;
        const lastItem = values[values.length - 1];

        if (lastItem) {
            values.pop();
            const sameItem = values.find(value => value === lastItem);
            if (sameItem === undefined) {
                values.push(lastItem);
            }
        }

        this.setState({
            value: values
        });
    }

    render() {
        return (
            <div>
                <div className="example-config">
                    Selected Values: {JSON.stringify(this.state.value)}
                </div>
                <MultiSelect
                    data={sports}
                    onChange={this.handleChange}
                    value={this.state.value}
                    allowCustom={true}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);

Object Values

The following example demonstrates how to allow custom values when the MultiSelect is bound to a dataset of objects.

import React from 'react';
import ReactDOM from 'react-dom';
import { MultiSelect } from '@progress/kendo-react-dropdowns';

const sports = [
    { text: 'Basketball', id: 1 },
    { text: 'Football', id: 2 },
    { text: 'Tennis', id: 3 },
    { text: 'Volleyball', id: 4 }
];

class AppComponent extends React.Component {
    state = { value: [] };

    isCustom(item) { return item.id === undefined; }
    addKey(item) { item.id = new Date().getTime(); }

    handleChange = (event) => {
        const values = event.target.value;
        const lastItem = values[values.length - 1];

        if (lastItem && this.isCustom(lastItem)) {
            values.pop();
            const sameItem = values.find(v => v.text === lastItem.text);
            if (sameItem === undefined) {
                this.addKey(lastItem);
                values.push(lastItem);
            }
        }

        this.setState({
            value: values
        });
    }

    render() {
        return (
            <div>
                <div className="example-config">
                    Selected Values: {JSON.stringify(this.state.value)}
                </div>
                <MultiSelect
                    data={sports}
                    onChange={this.handleChange}
                    value={this.state.value}
                    textField="text"
                    dataItemKey="value"
                    allowCustom={true}
                />
            </div>
        );
    }
}

ReactDOM.render(
    <AppComponent />,
    document.querySelector('my-app')
);
 /