How to render other components in Toolbar using template

4 Sep 20266 minutes to read

You can render other components inside the React Toolbar using a React template. This allows you to add other components directly, with all their functionality, to the React Toolbar. Follow the guidelines below for using other components as a template in the React Toolbar. For general template configuration, refer to template configuration.

  1. Declare a template within a function that returns a JSX element. The template can receive the item’s data object as an argument (e.g., props containing the React toolbar item). If the template does not need arguments, there is no need to pass any properties.

  2. Assign the function as the value for the template property, for example <ItemDirective template={contentTemplate} />.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
const App = () => {
  const buttonComponent = () => {
    return (<ButtonComponent>Click me</ButtonComponent>);
  }
  const datePickerTemplate = () => {
    return (<DatePickerComponent></DatePickerComponent>);
  }
  return (<div id='container'>
    <ToolbarComponent id="toolbar">
      <ItemsDirective>
        <ItemDirective template={buttonComponent} />
        <ItemDirective template={datePickerTemplate} />
        <ItemDirective text="Cut" />
        <ItemDirective text="Copy" />
        <ItemDirective text="Paste" />
        <ItemDirective type="Separator" />
        <ItemDirective text="Bold" />
        <ItemDirective text="Italic" />
        <ItemDirective text="Underline" />
      </ItemsDirective>
    </ToolbarComponent>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';


const App = () => {
  const buttonTemplate = (): JSX.Element => {
    return (<ButtonComponent>Click me</ButtonComponent>);
  }
  const datePickerTemplate = (): JSX.Element => {
    return (<DatePickerComponent></DatePickerComponent>);
  }
  return (
    <div id='container'>
      <ToolbarComponent id="toolbar">
        <ItemsDirective>
          <ItemDirective template={buttonTemplate} />
          <ItemDirective template={datePickerTemplate} />
          <ItemDirective text="Cut" />
          <ItemDirective text="Copy" />
          <ItemDirective text="Paste" />
          <ItemDirective type="Separator" />
          <ItemDirective text="Bold" />
          <ItemDirective text="Italic" />
          <ItemDirective text="Underline" />
        </ItemsDirective>
      </ToolbarComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id='element'>
            <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>