Icons and templates in EJ2 JavaScript List box control

2 May 20236 minutes to read

Icons

To place the icon on a list box, set the iconCss property to e-icons with the required icon CSS. By default, the icon is positioned to the left side of the list.

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

// define the array of object
var data = [
    { text: 'Account Settings', id: 'list-01', iconCss: 'e-list-icons e-list-user-settings' },
    { text: 'Address Book', id: 'list-02', iconCss: 'e-list-icons e-list-address-book' },
    { text: 'Delete', id: 'list-03', iconCss: 'e-list-icons e-list-delete' },
    { text: 'Forward', id: 'list-04', iconCss: 'e-list-icons e-list-forward' },
    { text: 'Reply', id: 'list-05', iconCss: 'e-list-icons e-list-reply' },
    { text: 'Reply All', id: 'list-06', iconCss: 'e-list-icons e-list-reply-all' },
    { text: 'Save All Attachments', id: 'list-07', iconCss: 'e-list-icons e-list-save-all-attachments' },
    { text: 'Save As', id: 'list-08', iconCss: 'e-list-icons e-list-icon-save-as' },
    { text: 'Touch/Mouse Mode', id: 'list-09', iconCss: 'e-list-icons e-list-touch' },
    { text: 'Undo', id: 'list-10', iconCss: ' e-list-icons e-list-undo' }
];

// initialize ListBox component
var listObj = new ej.dropdowns.ListBox({
    //set the data to dataSource property
    dataSource: data,
    fields: { text: 'text', iconCss: 'iconCss'}
});
listObj.appendTo('#listbox');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 ListBox</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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="margin:0 auto; width:250px;">
        <input id="listbox">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Templates

ListBox items can be customized according to the requirement using itemTemplate property.

In the following sample, the items in the cart are displayed using list box template,

// define the array of object
var data = [
    { text: 'JavaScript', pic: 'javascript', description: 'It is a lightweight interpreted or JIT-compiled programming language.' },
    { text: 'TypeScript', pic: 'typeScript', description: 'It is a typed superset of Javascript that compiles to plain JavaScript.' },
    { text: 'Angular', pic: 'angular', description: 'It is a TypeScript-based open-source web application framework.' },
    { text: 'React', pic: 'react', description: 'A JavaScript library for building user interfaces. It can also render on the server using Node.' },
    { text: 'Vue', pic: 'vue', description: 'A progressive framework for building user interfaces. it is incrementally adoptable.' }
];

// initialize ListBox component
var listObj = new ej.dropdowns.ListBox({
    //set the data to dataSource property
    dataSource: data,
    itemTemplate: '<div class="list-wrapper">' +
    '<span class="${pic} e-avatar e-avatar-xlarge e-avatar-circle"></span>' +
    '<span class="text">${text}</span><span class="description">' +
    '${description}</span></div>'
});
listObj.appendTo('#listbox');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 ListBox</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="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <input id="listbox">
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

See Also