Search results

Show the list items with icons

You can render icons to the list items by mapping the the iconCss  fields. 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.tsx
index.jsx
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
    // define the array of data
    private sortFormatData: { [key: string]: Object }[] = [
        { 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' }
    ];

    // map the icon column to iconCSS field.
    private fields: object = { text: 'Type', iconCss: 'Class', value: 'Id' };

    public render() {
        return (
             // specifies the tag for render the ComboBox component
            <ComboBoxComponent id="comboelement" dataSource={this.sortFormatData} fields={this.fields} placeholder="Select a format" />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { ComboBoxComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        // define the array of data
        this.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' }
        ];
        // map the icon column to iconCSS field.
        this.fields = { text: 'Type', iconCss: 'Class', value: 'Id' };
    }
    render() {
        return (
        // specifies the tag for render the ComboBox component
        <ComboBoxComponent id="comboelement" dataSource={this.sortFormatData} fields={this.fields} placeholder="Select a format"/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));