ChipCustomization.cshtml

@using Syncfusion.EJ2
@section ControlsSection{
    <div class="col-lg-12 control-section" style="height: 400px;">
        <div class="control-wrapper">
            <div style="padding-top:15px;">
                <h4>Chip Customization</h4>
                <ejs-multiselect id="chip-customization" dataSource="@ViewBag.data" value="@ViewBag.val" placeholder="Favorite Colors"
                                mode="Box" tagging="onTagging">
                    <e-multiselect-fields text="Color" value="Code"></e-multiselect-fields>
                </ejs-multiselect>
            </div>
        </div>
    </div>
    <style>
        .control-fluid, .container-fluid {
            padding-right: 15px;
            padding-left: 15px;
        }
        .control-content .control-section{
            border-width: 0px !important;
        }
        
        .control-section .control-wrapper {
            width: 80%;
            margin: 0 auto;
            min-width: 185px;
        }

        .e-bigger .control-section .control-wrapper {
            width: 100%;
        }

        .e-multi-select-wrapper .e-chips {
            opacity: 0.9;
        }

            .e-multi-select-wrapper .e-chips:hover {
                opacity: 1;
            }

            .e-multi-select-wrapper .e-chips .e-chips-close.e-icon::before,
            .e-multi-select-wrapper .e-chips .e-chipcontent,
            .e-multi-select-wrapper .e-chips .e-chipcontent:hover {
                color: #ffffff;
            }

        .e-chips.chocolate,
        .e-chips.chocolate:hover {
            background-color: #75523C;
        }

        .e-chips.darkorange,
        .e-chips.darkorange:hover {
            background-color: #FF843D;
        }

        .e-chips.darkred,
        .e-chips.darkred:hover {
            background-color: #CA3832;
        }

        .e-chips.fuchsia,
        .e-chips.fuchsia:hover {
            background-color: #D44FA3;
        }

        .e-chips.cadetblue,
        .e-chips.cadetblue:hover {
            background-color: #3B8289;
        }

        .e-chips.hotpink,
        .e-chips.hotpink:hover {
            background-color: #F23F82;
        }

        .e-chips.indigo,
        .e-chips.indigo:hover {
            background-color: #2F5D81;
        }

        .e-chips.limegreen,
        .e-chips.limegreen:hover {
            background-color: #4CD242;
        }

        .e-chips.orangered,
        .e-chips.orangered:hover {
            background-color: #FE2A00;
        }

        .e-chips.tomato,
        .e-chips.tomato:hover {
            background-color: #FF745C;
        }
    </style>
    <script type="text/javascript">
        function onTagging(e) {
            var colors = document.getElementById('chip-customization').ej2_instances[0];
            e.setClass((e.itemData)[colors.fields.text].toLowerCase());
        }
    </script>
}


@section Meta{
    <meta name="description" content="This example demonstrates how to customize the appearance of the selected chip element in the ASP.NET Core multiselect control."/>
}
@section ActionDescription{
    <div id="action-description">
        <p>
            This sample demonstrates the customization of selected chip element in the MultiSelect. Type a character in the MultiSelect element or click on the element to choose one or more items from the list.
        </p>
    </div>
}
@section Description{
    <div id="description">
        <p>
        The MultiSelect allows the user to customize the selected chip element through the <code>tagging</code> event. 
        In that event, you can set the custom classes to chip element via the event argument of the <code>setClass</code> method.
        </p>
        <p>
        This sample illustrates  how to use the favorite colors of data and set the favorite color text as custom class through <code>tagging</code> event argument of the <code>setClass</code> method.
        </p>
    </div>
}