Chip customization in EJ2 TypeScript Multi select control

2 May 20234 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.

import { MultiSelect,TaggingEventArgs  } from '@syncfusion/ej2-dropdowns';

//define the array of complex data
 let 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' }
    ];

//initiate the MultiSelect
let msObject: MultiSelect = new MultiSelect({
    // bind the sports Data to datasource property
    dataSource: colorsData,
    // maps the appropriate column to fields property
    fields: { text: 'Color', value: 'Code' },
    // set the value to MultiSelect
    value: ['#75523C', '#4CD242', '#FF745C'],
    //set the placeholder to MultiSelect input
    placeholder:"Select a color",
    // set the type of mode for how to visualized the selected items in input element.
    mode: 'Box',
    // bind the tagging event
    tagging: (e: TaggingEventArgs) => {
            // set the current selected item text as class to chip element.
            e.setClass((e.itemData as any)[msObject.fields.text].toLowerCase());
        }
});
// render initialized multiSelect
msObject.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="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING...</div>
    <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>
</body>

</html>