Chip customization in React Multi select component
2 Feb 202310 minutes to read
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 {
// define the JSON of data
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
fields = { text: 'Color', value: 'Code' };
// set the value to MultiSelect
colorValues = ['#75523C', '#4CD242', '#FF745C'];
// bind the tagging event
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'));
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'));
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
const onTagging = (e: TaggingEventArgs) => {
// set the current selected item text as class to chip element.
e.setClass((e.itemData as any)[fields.text].toLowerCase());
}
return (
<MultiSelectComponent id="chip-customization" value={colorValues} dataSource={colorsData} fields={fields} mode="Box" placeholder="Favorite Colors" tagging={onTagging} />
);
}
ReactDOM.render(<App />, document.getElementById('sample'));