Icons and templates in React List box component

21 Feb 20267 minutes to read

Icons

Add icons to list box items by setting the iconCss property with the e-icons class and required icon CSS. Icons are positioned on the left side of the list by default.

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

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let data = [
        { text: 'Account Settings', iconCss: 'e-list-icons e-list-user-settings' },
        { text: 'Address Book', iconCss: 'e-list-icons e-list-address-book' },
        { text: 'Delete', iconCss: 'e-list-icons e-list-delete' },
        { text: 'Forward', iconCss: 'e-list-icons e-list-forward' },
        { text: 'Reply', iconCss: 'e-list-icons e-list-reply' },
        { text: 'Reply All', iconCss: 'e-list-icons e-list-reply-all' },
        { text: 'Save All Attachments', iconCss: 'e-list-icons e-list-save-all-attachments' },
        { text: 'Save As', iconCss: 'e-list-icons e-list-icon-save-as' },
        { text: 'Touch/Mouse Mode', iconCss: 'e-list-icons e-list-touch' },
        { text: 'Undo', iconCss: ' e-list-icons e-list-undo' }
    ];
    let fields = { text: "text", iconCss: "iconCss" };
    return (<ListBoxComponent dataSource={data} fields={fields}/>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  let data: { [key: string]: Object }[] = [
    { text: 'Account Settings', iconCss: 'e-list-icons e-list-user-settings' },
    { text: 'Address Book', iconCss: 'e-list-icons e-list-address-book' },
    { text: 'Delete', iconCss: 'e-list-icons e-list-delete' },
    { text: 'Forward', iconCss: 'e-list-icons e-list-forward' },
    { text: 'Reply', iconCss: 'e-list-icons e-list-reply' },
    { text: 'Reply All', iconCss: 'e-list-icons e-list-reply-all' },
    { text: 'Save All Attachments', iconCss: 'e-list-icons e-list-save-all-attachments' },
    { text: 'Save As', iconCss: 'e-list-icons e-list-icon-save-as' },
    { text: 'Touch/Mouse Mode', iconCss: 'e-list-icons e-list-touch' },
    { text: 'Undo', iconCss: ' e-list-icons e-list-undo' }
  ];

  let fields:object = { text:"text", iconCss:"iconCss"}

  return (
    <ListBoxComponent dataSource={data} fields={fields}/>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

Templates

Customize ListBox items using the itemTemplate property to display items according to your requirements.

In the following example, cart items are displayed using a ListBox template:

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let 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.' }
    ];
    return (<div>
    <ListBoxComponent 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>'/>
  </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  let data: { [key: string]: Object }[] = [
    { 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.' }
  ];

  return (
  <div>
    <ListBoxComponent 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>'/>
  </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));