How To

Set command customization

The htmlAttributes property of the Toolbar item is used to set the HTML attributes (‘ID’, ‘class’, ‘style’ ,‘role’) for the commands.

When style attributes are added, if the same attributes were already present, they will be replaced. This is not so in the case of class attribute. Classes will be added to the element instead of replacing the existing ones.

Single or multiple CSS classes can be added to the Toolbar commands using the Toolbar item cssClass property.

Source
Preview
index.tsx
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public boldAttribute: any = { 'class': 'custom_bold', 'id': 'itemId' };
  public italicAttribute: any = { 'class': 'custom_italic' };
  public underAttribute: any = { 'class': 'custom_underline' };

  public render() {
    return (
      <ToolbarComponent width="300" >
        <ItemsDirective>
          <ItemDirective text="Bold" htmlAttributes={this.boldAttribute} />
          <ItemDirective text="Italic" htmlAttributes={this.italicAttribute} />
          <ItemDirective text="Underline" htmlAttributes={this.underAttribute} />
          <ItemDirective type="Separator" />
          <ItemDirective text="Uppercase" cssClass="e-txt-casing" />
        </ItemsDirective>
      </ToolbarComponent>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));

Set Essential JS 2 tooltip to the commands

The tooltipText property of the Toolbar item is used to set the HTML Tooltip to the commands that can be viewed as hint texts on mouse hover.

To change the tooltipText to ej2-tooltip component:

  • Import the Tooltip module from ej2-popups,and initialize the Tooltip with the Toolbar target. Refer to the following code example:
Source
Preview
index.tsx
import { Tooltip } from '@syncfusion/ej2-popups';
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public componentDidMount() {
    const tooltip: Tooltip = new Tooltip({
      target: '#toolbar [title]',
    });
    tooltip.appendTo('#Tooltip');
  }

  public render() {
    return (
      <div id="Tooltip">
        <ToolbarComponent width="300">
          <ItemsDirective>
            <ItemDirective text="Cut" tooltipText="Cut" />
            <ItemDirective text="Copy" tooltipText="Copy" />
            <ItemDirective text="Paste" tooltipText="Paste" />
            <ItemDirective text="Undo" tooltipText="Undo" />
            <ItemDirective text="Redo" tooltipText="Redo" />
          </ItemsDirective>
        </ToolbarComponent>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));

Set item wise custom template

The Toolbar supports adding template commands using the template property. Template property can be given as the HTML element that is either a string or a query selector.

As string

The HTML element tag can be given as a string for the template property. Here, the checkbox is rendered as a HTML template.

template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"

As selector

The template property also allows getting template content through query selector. Here, checkbox ‘ID’ attribute is specified in the template.

template: "#Template"
Source
Preview
index.tsx
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public render() {
    return (
      <ToolbarComponent >
        <ItemsDirective>
          <ItemDirective text="Cut" />
          <ItemDirective type="Separator" />
          <ItemDirective text="Paste" />
          <ItemDirective type="Separator" />
          <ItemDirective template="<div><input type='checkbox' id='check1' checked=''>Accept</input></div>" />
          <ItemDirective text="Undo" />
          <ItemDirective text="Redo" />
          <ItemDirective template="#Template" />
        </ItemsDirective>
      </ToolbarComponent>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));

Add Toggle Button

Toolbar supports to add a toggle Button by using the template property. Refer below steps

  • By using Toolbar template property, pass required HTML String to render toggle button.
  <ItemDirective template='<button class="e-btn" id="media_btn"></button>' />
  • Now render the toggle Button into the targeted element in Toolbar created event handler and bind click event for it. On clicking the toggle Button, change the required icon and content based on current active state.
Source
Preview
index.tsx
index.html
import { Button } from '@syncfusion/ej2-react-buttons';
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public undoBtn: any;
  public zoomBtn: any;
  public mediaBtn: any;
  public filterBtn: any;
  public visibleBtn: any;

  public tbCreated(): void {
    this.zoomBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-zoomin-icon', isToggle: true });
    this.zoomBtn.appendTo('#zoom_btn');

    this.mediaBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-play-icon', isToggle: true });
    this.mediaBtn.appendTo('#media_btn');

    this.undoBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-undo-icon', isToggle: true });
    this.undoBtn.appendTo('#undo_btn');

    this.filterBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-filter-icon', isToggle: true });
    this.filterBtn.appendTo('#filter_btn');

    this.visibleBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-hide-icon', isToggle: true, content: 'Hide' });
    this.visibleBtn.appendTo('#visible_btn');

    // Toggle button click event handlers
    this.zoomBtn.element.onclick = (): void => {
      if (this.zoomBtn.element.classList.contains('e-active')) {
        this.zoomBtn.iconCss = 'e-icons e-zoomout-icon';
      } else {
        this.zoomBtn.iconCss = 'e-icons e-zoomin-icon';
      }
    };

    this.mediaBtn.element.onclick = (): void => {
      if (this.mediaBtn.element.classList.contains('e-active')) {
        this.mediaBtn.iconCss = 'e-icons e-pause-icon';
      } else {
        this.mediaBtn.iconCss = 'e-icons e-play-icon';
      }
    };

    this.undoBtn.element.onclick = (): void => {
      if (this.undoBtn.element.classList.contains('e-active')) {
        this.undoBtn.iconCss = 'e-icons e-redo-icon';
      } else {
        this.undoBtn.iconCss = 'e-icons e-undo-icon';
      }
    };

    this.filterBtn.element.onclick = (): void => {
      if (this.filterBtn.element.classList.contains('e-active')) {
        this.filterBtn.iconCss = 'e-icons e-filternone-icon';
      } else {
        this.filterBtn.iconCss = 'e-icons e-filter-icon';
      }
    };

    this.visibleBtn.element.onclick = (): void => {
      if (this.visibleBtn.element.classList.contains('e-active')) {
        (document.getElementById('content') as HTMLElement).style.display = 'none';
        this.visibleBtn.content = 'Show';
        this.visibleBtn.iconCss = 'e-icons e-show-icon';
      } else {
        (document.getElementById('content') as HTMLElement).style.display = 'block';
        this.visibleBtn.content = 'Hide';
        this.visibleBtn.iconCss = 'e-icons e-hide-icon';
      }
    };
  }

  public render() {
    const divMargin = { margin: '25px 0' };

    return (
      <div>
        <div className='control-pane'>
          <div className='control-section tbar-control-section'>
            <div className='control toolbar-sample tbar-sample' style={divMargin}>
              <ToolbarComponent id="ej2Toolbar" className="toggle" created={this.tbCreated}>
                <ItemsDirective>
                  <ItemDirective template='<button class="e-btn" id="media_btn"></button>' />
                  <ItemDirective type='Separator' />
                  <ItemDirective template='<button class="e-btn" id="zoom_btn"></button>' />
                  <ItemDirective type='Separator' />
                  <ItemDirective template='<button class="e-btn" id="undo_btn"></button>' />
                  <ItemDirective type='Separator' />
                  <ItemDirective template='<button class="e-btn" id="filter_btn"></button>' />
                  <ItemDirective type='Separator' />
                  <ItemDirective template='<button class="e-btn" id="visible_btn"></button>' />
                </ItemsDirective>
              </ToolbarComponent>
            </div>
          </div>
        </div>
        <br />
        <div id="content">
          This content will be hidden, when you click on hide button and toggle get an active state as show, otherwise it will be visible.
        </div>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Toolbar Sample</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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #container {
            visibility: hidden;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        @font-face {
            font-family: 'toolbar';
            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .e-toolbar.toggle .e-btn .e-icons {
            font-family: 'toolbar' !important;
            font-size: 16px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
        }

        .e-hide-icon::before {
            content: '\a701';
        }

        .e-show-icon::before {
            content: '\a700';
        }

        .e-filter-icon::before {
            content: '\a709';
        }

        .e-filternone-icon::before {
            content: '\a708';
        }

        .e-undo-icon::before {
            content: '\a706';
        }

        .e-redo-icon::before {
            content: '\a707';
        }

        .e-play-icon::before {
            content: '\a704';
        }

        .e-pause-icon::before {
            content: '\a705';
        }

        .e-zoomin-icon::before {
            content: '\a702';
        }

        .e-zoomout-icon::before {
            content: '\a703';
        }
    </style>
</head>

<body>
    <div id='toolbar'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

How to customize toolbar scrollStep

Toolbar supports to customize the scrolling distance when you click the left and right side navigation icons. Through beforeCreate event we can customize scrollStep property for scrolling distance. Please Refer below steps

  • By using Toolbar scrollStep property, pass a required value to customize toolbar scrollStep.
  public beforeCreate(e: BeforeCreateArgs): void {
        e.scrollStep = 50;
  }
  • Now customize the scrollStep value in Toolbar beforeCreate event handler.
Source
Preview
index.tsx
index.html
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective, BeforeCreateArgs } from '@syncfusion/ej2-react-navigations';

export class ReactApp extends React.Component<{}, {}> {

  public beforeCreate(e: BeforeCreateArgs): void {
        e.scrollStep = 50;
  }

  render () {
    const divMargin = { margin: '25px 0' };

    return (
      <div className='control-pane'>
        <div className='control-section tbar-control-section'>
          <div className='control toolbar-sample tbar-sample' style={divMargin}>
            <ToolbarComponent id="ej2Toolbar" width="600px" beforeCreate={this.beforeCreate.bind(this)}>
              <ItemsDirective>
                <ItemDirective prefixIcon = 'e-cut-icon'  tooltipText = 'Cut'/>
                <ItemDirective prefixIcon = 'e-copy-icon'  tooltipText = 'Copy'/>
                <ItemDirective prefixIcon = 'e-paste-icon'  tooltipText = 'Paste'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-bold-icon'  tooltipText = 'Bold'/>
                <ItemDirective prefixIcon = 'e-underline-icon'  tooltipText = 'Underline'/>
                <ItemDirective prefixIcon = 'e-italic-icon'  tooltipText = 'Italic'/>
                <ItemDirective prefixIcon = 'e-color-icon'  tooltipText = 'Color-Picker'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-alignleft-icon'  tooltipText = 'Align_Left'/>
                <ItemDirective prefixIcon = 'e-alignright-icon'  tooltipText = 'Align_Right'/>
                <ItemDirective prefixIcon = 'e-aligncenter-icon'  tooltipText = 'Align_Center'/>
                <ItemDirective prefixIcon = 'e-alignjustify-icon'  tooltipText = 'Align_Justify'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-bullets-icon'  tooltipText = 'Bullets'/>
                <ItemDirective prefixIcon = 'e-numbering-icon'  tooltipText = 'Numbering'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-bullets-icon'  tooltipText = 'Bullets'/>
                <ItemDirective prefixIcon = 'e-numbering-icon'  tooltipText = 'Numbering'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-ascending-icon'  tooltipText = 'Sort A - Z'/>
                <ItemDirective prefixIcon = 'e-descending-icon'  tooltipText = 'Sort Z - A'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-indent-icon'  tooltipText = 'Text Indent'/>
                <ItemDirective prefixIcon = 'e-outdent-icon'  tooltipText = 'Text Outdent'/>
                <ItemDirective type = 'Separator'/>
                <ItemDirective prefixIcon = 'e-clear-icon'  tooltipText = 'Clear'/>
                <ItemDirective prefixIcon = 'e-reload-icon'  tooltipText = 'Reload'/>
                <ItemDirective prefixIcon = 'e-export-icon'  tooltipText = 'Export'/>
              </ItemsDirective>
            </ToolbarComponent>
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById('toolbar'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Toolbar Sample</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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #container {
            visibility: hidden;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .e-tbar-btn .e-icons {
            font-family: 'Material_toolbar';
            font-size: 16px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
        }
    </style>
</head>

<body>
    <div id='toolbar'>
        <div id='loader'>Loading....</div>
    </div>
    <br/>
</body>

</html>

Render other components in Toolbar using template

You can render other components inside Toolbar using React template. Through this, we can add content as other components directly with all functionalities to our Toolbar. Follow the below guidelines for using the other components as template in Toolbar.

  • Declare a template within the function returns jsx element. If the template does not need arguments no need to pass the properties.

  • Assign the function as value for the template property.

Source
Preview
index.tsx
index.html
index.css
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { ItemDirective, ItemsDirective, ToolbarComponent } from '@syncfusion/ej2-react-navigations';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public contentTemplate1() {
    return(<ButtonComponent>Click me</ButtonComponent>);
  }
  public contentTemplate2() {
    return(<DatePickerComponent />);
  }

  public render() {
    return (
      <div id='container'>
        <ToolbarComponent id="toolbar">
          <ItemsDirective>
            <ItemDirective template={this.contentTemplate1} />
            <ItemDirective template={this.contentTemplate2} />
            <ItemDirective text="Cut" />
            <ItemDirective text="Copy" />
            <ItemDirective text="Paste" />
            <ItemDirective type="Separator" />
            <ItemDirective text="Bold" />
            <ItemDirective text="Italic" />
            <ItemDirective text="Underline" />
          </ItemsDirective>
        </ToolbarComponent>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));
<!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="//cdn.syncfusion.com/ej2/material.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>
#container {
    max-width: 700px;
    min-width: 520px;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}