The MultiSelect allows user to add a new non-present option to the component value when allowCustomValue is enabled.
while selecting the new custom value customValueSelection event will be triggered.
The following sample demonstrates configuration of custom value support with the MultiSelect component.
[Class-component]
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor() {
super(...arguments);
// define the JSON of data
this.sportsData = [
{ id: 'game1', sports: 'Badminton' },
{ id: 'game2', sports: 'Football' },
{ id: 'game3', sports: 'Tennis' }
];
// maps the appropriate column to fields property
this.fields = { text: 'sports', value: 'id' };
}
render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="mtselement" dataSource={this.sportsData} fields={this.fields} placeholder="Select a game" allowCustomValue={true}/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private sportsData: { [key: string]: Object }[] = [
{ id: 'game1', sports: 'Badminton' },
{ id: 'game2', sports: 'Football' },
{ id: 'game3', sports: 'Tennis' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'sports', value: 'id' };
public render() {
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="mtselement" dataSource={this.sportsData} fields={this.fields} placeholder="Select a game" allowCustomValue={true} />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));[Functional-component]
import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData = [
{ id: 'game1', sports: 'Badminton' },
{ id: 'game2', sports: 'Football' },
{ id: 'game3', sports: 'Tennis' }
];
// maps the appropriate column to fields property
const fields = { text: 'sports', value: 'id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="mtselement" dataSource={sportsData} fields={fields} placeholder="Select a game" allowCustomValue={true}/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React MultiSelect</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.3.56/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const sportsData: { [key: string]: Object }[] = [
{ id: 'game1', sports: 'Badminton' },
{ id: 'game2', sports: 'Football' },
{ id: 'game3', sports: 'Tennis' }
];
// maps the appropriate column to fields property
const fields: object = { text: 'sports', value: 'id' };
return (
// specifies the tag for render the MultiSelect component
<MultiSelectComponent id="mtselement" dataSource={sportsData} fields={fields} placeholder="Select a game" allowCustomValue={true} />
);
}
ReactDOM.render(<App />, document.getElementById('sample'));