Add Toggle Button in React Toolbar component

02 Feb 2023 / 3 minutes to read

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.jsx

index.html

index.tsx

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { Button } from '@syncfusion/ej2-react-buttons';
function ReactApp() {
    let undoBtn;
    let zoomBtn;
    let mediaBtn;
    let filterBtn;
    let visibleBtn;
    const tbCreated = () => {
        zoomBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-zoomin-icon', isToggle: true });
        zoomBtn.appendTo('#zoom_btn');
        mediaBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-play-icon', isToggle: true });
        mediaBtn.appendTo('#media_btn');
        undoBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-undo-icon', isToggle: true });
        undoBtn.appendTo('#undo_btn');
        filterBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-filter-icon', isToggle: true });
        filterBtn.appendTo('#filter_btn');
        visibleBtn = new Button({ cssClass: `e-flat`, iconCss: 'e-icons e-hide-icon', isToggle: true, content: 'Hide' });
        visibleBtn.appendTo('#visible_btn');
        //Toggle button click event handlers
        zoomBtn.element.onclick = () => {
            if (zoomBtn.element.classList.contains('e-active')) {
                zoomBtn.iconCss = 'e-icons e-zoomout-icon';
            }
            else {
                zoomBtn.iconCss = 'e-icons e-zoomin-icon';
            }
        };
        mediaBtn.element.onclick = () => {
            if (mediaBtn.element.classList.contains('e-active')) {
                mediaBtn.iconCss = 'e-icons e-pause-icon';
            }
            else {
                mediaBtn.iconCss = 'e-icons e-play-icon';
            }
        };
        undoBtn.element.onclick = () => {
            if (undoBtn.element.classList.contains('e-active')) {
                undoBtn.iconCss = 'e-icons e-redo-icon';
            }
            else {
                undoBtn.iconCss = 'e-icons e-undo-icon';
            }
        };
        filterBtn.element.onclick = () => {
            if (filterBtn.element.classList.contains('e-active')) {
                filterBtn.iconCss = 'e-icons e-filternone-icon';
            }
            else {
                filterBtn.iconCss = 'e-icons e-filter-icon';
            }
        };
        visibleBtn.element.onclick = () => {
            if (visibleBtn.element.classList.contains('e-active')) {
                document.getElementById('content').style.display = 'none';
                visibleBtn.content = 'Show';
                visibleBtn.iconCss = 'e-icons e-show-icon';
            }
            else {
                document.getElementById('content').style.display = 'block';
                visibleBtn.content = 'Hide';
                visibleBtn.iconCss = 'e-icons e-hide-icon';
            }
        };
    };
    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" created={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>);
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

<!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="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/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>
</head>

<body>
    <div id="container">
      <div id="toolbar" class="toggle">
        <div id="loader">LOADING....</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>
</body>

</html>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { Button } from '@syncfusion/ej2-react-buttons';

function ReactApp() {
  let undoBtn: any;
  let zoomBtn: any;
  let mediaBtn: any;
  let filterBtn: any;
  let visibleBtn: any;

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

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

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

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

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

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

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

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

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

visibleBtn.element.onclick = (): void => {
  if (visibleBtn.element.classList.contains('e-active')) {
    (document.getElementById('content') as HTMLElement).style.display = 'none';
    visibleBtn.content = 'Show';
    visibleBtn.iconCss = 'e-icons e-show-icon';
  } else {
    (document.getElementById('content') as HTMLElement).style.display = 'block';
    visibleBtn.content = 'Hide';
    visibleBtn.iconCss = 'e-icons e-hide-icon';
  }
};
  }
  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" created={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>
  );
}
const root = ReactDOM.createRoot(document.getElementById('toolbar'));
root.render(<ReactApp />);

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!