How To

Show the list items with icons

You can render icons to the list items by mapping the iconCss  field. This iconCss field create a span in the list item with mapped class name to allow styling as per your need.

In the following sample, icon classes are mapped with iconCss field.

Source
Preview
index.js
index.html
var sortFormatData= [
    { class: 'asc-sort', type: 'Sort A to Z', id: '1' },
    { class: 'dsc-sort', type: 'Sort Z to A ', id: '2' },
    { class: 'filter', type: 'Filter', id: '3' },
    { class: 'clear', type: 'Clear', id: '4' }
];

var sortFormat = new ej.dropdowns.MultiSelect({
    dataSource: sortFormatData,
    // map the icon column to iconCSS field.
    fields: { text: 'type', iconCss: 'class', value: 'id' },
    placeholder: 'Select a format'
});
sortFormat.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="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <br>
        <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>

Validate MultiSelect

MultiSelect component inside form can be validated through FormValidator. Add the name attribute of component to be validated inside rules of FormValidator. Error message after validation can be placed in DOM based on the requirement through customPlacement.

In the following sample, validation is added for MultiSelect component.

{% tab template=“multiselect/validation”, es5Template=“validation-howto”, sourceFiles =‘app.ts,index.html,styles.css’ %}

import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
import { Button } from '@syncfusion/ej2-buttons';
import { MultiSelect } from '@syncfusion/ej2-dropdowns';

   let listObj1: MultiSelect = new MultiSelect({
        // set the placeholder to MultiSelect input element
        placeholder: 'Favorite Sports',
        // set the type of mode for how to visualized the selected items in input element.
        mode: 'Default'
    });
    listObj1.appendTo('#default');

    // Initialize Submit button
    let buttonFormValidate: Button = new Button({ isPrimary: true });
    buttonFormValidate.appendTo('#validateSubmit');
    // Initialize Reset button
    let buttonReset: Button = new Button({});
    buttonReset.appendTo('#resetbtn');
    // Initialize Custom placement
    let option: FormValidatorModel = {
        rules: {
            // Initialize the CustomPlacement.
             default: { required: true }
        },
    customPlacement: (inputElement: HTMLElement, error: HTMLElement)=>{
        inputElement.parentElement.parentElement.parentElement.insertBefore(error, inputElement.parentElement.parentElement.nextSibling);
    }
    };
    // Initialize Form validation
    let formObj: FormValidator;
    formObj = new FormValidator('#formId', option);
    let formId: HTMLElement = <HTMLElement>document.getElementById('formId');
    document.getElementById('formId').addEventListener(
        'submit',
        (e: Event) => {
            e.preventDefault();
            if (formObj.validate()) {
                alert('Success');
                formObj.reset();
            }
        });