The MultiSelect allows the user to customize the selected chip element through the tagging
event. In that event, you can set the custom classes to chip element via that event argument of setClass method.
The following sample demonstrates chip-customization 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.colorsData = [
{ Color: 'Chocolate', Code: '#75523C' },
{ Color: 'CadetBlue', Code: '#3B8289' },
{ Color: 'DarkOrange', Code: '#FF843D' },
{ Color: 'DarkRed', Code: '#CA3832' },
{ Color: 'Fuchsia', Code: '#D44FA3' },
{ Color: 'HotPink', Code: '#F23F82' },
{ Color: 'Indigo', Code: '#2F5D81' },
{ Color: 'LimeGreen', Code: '#4CD242' },
{ Color: 'OrangeRed', Code: '#FE2A00' },
{ Color: 'Tomato', Code: '#FF745C' }
];
// maps the appropriate column to fields property
this.fields = { text: 'Color', value: 'Code' };
// set the value to MultiSelect
this.colorValues = ['#75523C', '#4CD242', '#FF745C'];
// bind the tagging event
this.onTagging = (e) => {
// set the current selected item text as class to chip element.
e.setClass(e.itemData[this.fields.text].toLowerCase());
};
}
render() {
return (<MultiSelectComponent id="chip-customization" value={this.colorValues} dataSource={this.colorsData} fields={this.fields} mode="Box" placeholder="Favorite Colors" tagging={this.onTagging = this.onTagging.bind(this)}/>);
}
}
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" />
<link href="./styles.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, TaggingEventArgs } 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 colorsData: { [key: string]: Object }[] =[
{ Color: 'Chocolate', Code: '#75523C' },
{ Color: 'CadetBlue', Code: '#3B8289' },
{ Color: 'DarkOrange', Code: '#FF843D' },
{ Color: 'DarkRed', Code: '#CA3832' },
{ Color: 'Fuchsia', Code: '#D44FA3' },
{ Color: 'HotPink', Code: '#F23F82' },
{ Color: 'Indigo', Code: '#2F5D81' },
{ Color: 'LimeGreen', Code: '#4CD242' },
{ Color: 'OrangeRed', Code: '#FE2A00' },
{ Color: 'Tomato', Code: '#FF745C' }
];
// maps the appropriate column to fields property
private fields: { [key: string]: string } = { text: 'Color', value: 'Code' };
// set the value to MultiSelect
private colorValues: string[] = ['#75523C', '#4CD242', '#FF745C'];
// bind the tagging event
public onTagging = (e: TaggingEventArgs) => {
// set the current selected item text as class to chip element.
e.setClass((e.itemData as any)[this.fields.text].toLowerCase());
}
public render() {
return (
<MultiSelectComponent id="chip-customization" value={this.colorValues} dataSource={this.colorsData} fields={this.fields} mode="Box" placeholder="Favorite Colors" tagging={this.onTagging = this.onTagging.bind(this)} />
);
}
}
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 colorsData = [
{ Color: 'Chocolate', Code: '#75523C' },
{ Color: 'CadetBlue', Code: '#3B8289' },
{ Color: 'DarkOrange', Code: '#FF843D' },
{ Color: 'DarkRed', Code: '#CA3832' },
{ Color: 'Fuchsia', Code: '#D44FA3' },
{ Color: 'HotPink', Code: '#F23F82' },
{ Color: 'Indigo', Code: '#2F5D81' },
{ Color: 'LimeGreen', Code: '#4CD242' },
{ Color: 'OrangeRed', Code: '#FE2A00' },
{ Color: 'Tomato', Code: '#FF745C' }
];
// maps the appropriate column to fields property
const fields = { text: 'Color', value: 'Code' };
// set the value to MultiSelect
const colorValues = ['#75523C', '#4CD242', '#FF745C'];
// bind the tagging event
function onTagging() { }
(e) => {
// set the current selected item text as class to chip element.
e.setClass(e.itemData[this.fields.text].toLowerCase());
};
return (<MultiSelectComponent id="chip-customization" value={colorValues} dataSource={colorsData} fields={fields} mode="Box" placeholder="Favorite Colors" tagging={onTagging = onTagging.bind(this)}/>);
}
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" />
<link href="./styles.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, TaggingEventArgs } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
// define the JSON of data
const colorsData: { [key: string]: Object }[] =[
{ Color: 'Chocolate', Code: '#75523C' },
{ Color: 'CadetBlue', Code: '#3B8289' },
{ Color: 'DarkOrange', Code: '#FF843D' },
{ Color: 'DarkRed', Code: '#CA3832' },
{ Color: 'Fuchsia', Code: '#D44FA3' },
{ Color: 'HotPink', Code: '#F23F82' },
{ Color: 'Indigo', Code: '#2F5D81' },
{ Color: 'LimeGreen', Code: '#4CD242' },
{ Color: 'OrangeRed', Code: '#FE2A00' },
{ Color: 'Tomato', Code: '#FF745C' }
];
// maps the appropriate column to fields property
const fields: { [key: string]: string } = { text: 'Color', value: 'Code' };
// set the value to MultiSelect
const colorValues: string[] = ['#75523C', '#4CD242', '#FF745C'];
// bind the tagging event
function onTagging = (e: TaggingEventArgs) => {
// set the current selected item text as class to chip element.
e.setClass((e.itemData as any)[this.fields.text].toLowerCase());
}
return (
<MultiSelectComponent id="chip-customization" value={colorValues} dataSource={colorsData} fields={fields} mode="Box" placeholder="Favorite Colors" tagging={onTagging = onTagging.bind(this)} />
);
}
ReactDOM.render(<App />, document.getElementById('sample'));