Item template in React Drop down button component

13 Dec 20247 minutes to read

The itemTemplate property in the DropDownButton component allows for the definition of custom templates to display dropdown items. This feature is especially useful for customizing the appearance and layout of dropdown items beyond the default options provided. By utilizing this property, diverse content such as icons, formatted text, and other visual elements can be integrated into the dropdown items for a more engaging and tailored user interface.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel, MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {

  let items = [
    {
      text: 'Home',
      iconCss: 'e-icons e-home',
    },
    {
      text: 'Search',
      iconCss: 'e-icons e-search',
      url: 'http://www.google.com'
    },
    {
      text: 'Yes / No',
      iconCss: 'e-icons e-check-box'
    },
    {
      text: 'Text',
      iconCss: 'e-icons e-caption',
    },
    {
      separator: true
    },
    {
      text: 'Syncfusion',
      iconCss: 'e-icons e-mouse-pointer',
      url: 'http://www.syncfusion.com'
    }
  ];

  function itemTemplate(data) {
    if (data.properties.url) {
      return (
        <div>
          <span className={`e-menu-icon ${data.properties.iconCss}`}></span>
          <span className="custom-class">
            <a href={data.properties.url} target="_blank" rel="noopener noreferrer">
              {data.properties.text}
            </a>
          </span>
        </div>
      );
    } else {
      return (
        <div>
          <span className={`e-menu-icon ${data.properties.iconCss}`}></span>
          <span className="custom-class">{data.properties.text}</span>
        </div>
      );
    }
  }

  return (
    <div>
      <DropDownButtonComponent items={items} itemTemplate={itemTemplate} >DropDownButton</DropDownButtonComponent>
    </div>
  );
}

export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel, MenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {

  let items: ItemModel[] = [
    {
      text: 'Home',
      iconCss: 'e-icons e-home',
    },
    {
      text: 'Search',
      iconCss: 'e-icons e-search',
      url: 'http://www.google.com'
    },
    {
      text: 'Yes / No',
      iconCss: 'e-icons e-check-box'
    },
    {
      text: 'Text',
      iconCss: 'e-icons e-caption',
    },
    {
      separator: true
    },
    {
      text: 'Syncfusion',
      iconCss: 'e-icons e-mouse-pointer',
      url: 'http://www.syncfusion.com'
    }
  ];

  function itemTemplate(data: any): any {
    if (data.properties.url) {
      return (
        <div>
          <span className={`e-menu-icon ${data.properties.iconCss}`}></span>
          <span className="custom-class">
            <a href={data.properties.url} target="_blank" rel="noopener noreferrer">
              {data.properties.text}
            </a>
          </span>
        </div>
      );
    } else {
      return (
        <div>
          <span className={`e-menu-icon ${data.properties.iconCss}`}></span>
          <span className="custom-class">{data.properties.text}</span>
        </div>
      );
    }
  }

  return (
    <div>
      <DropDownButtonComponent items={items} itemTemplate={itemTemplate} >DropDownButton</DropDownButtonComponent>
    </div>
  );
}

export default App;
ReactDom.render(<App />, document.getElementById('button'));