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.
var data = [
{ 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' }
];
// initialize MultiSelect component
var colors = new ej.dropdowns.MultiSelect({
// set the colors data to dataSource property
dataSource: data,
// map the appropriate columns to fields property
fields: { text: 'Color', value: 'Code' },
// set the value to MultiSelect
value: ['#75523C', '#4CD242', '#FF745C'],
// set the placeholder to MultiSelect input element
placeholder: 'Favorite Colors',
// set the type of mode for how to visualized the selected items in input element.
mode: 'Box',
// bind the tagging event
tagging: function (e) {
// set the current selected item text as class to chip element.
e.setClass(e.itemData[colors.fields.text].toLowerCase());
}
});
// render initialized multiSelect
colors.appendTo('#select');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 MultiSelect</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-dropdowns/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="margin:0 auto; width:250px;">
<br>
<!--element which is going to render the MultiSelect-->
<input type="text" tabindex="1" id="select">
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>