Search results

Add minimize and maximize buttons to Dialog header in JavaScript Dialog control

29 Sep 2022 / 2 minutes to read

Dialog allows end users to either minimize or maximize the Dialog component. You can add minimize and maximize custom buttons near the close icon in the Dialog header using the headerTemplate property and handle the actions in the button click events, as shown in the following sample.

Source
Preview
app.ts
index.html
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
import { Dialog } from '@syncfusion/ej2-popups';

let dialogObj: Dialog = new Dialog({
    header: `<span class='title'>Dialog</span>
          <span class='e-icons sf-icon-Maximize' id='max-btn' title='Maximize'></span>
          <span class='e-icons sf-icon-Minimize' id='min-btn' title='Minimize'></span>`,
    content: "This is a dialog with minimize and maximize buttons",
    showCloseIcon: true,
    buttons: [{ buttonModel: { isPrimary: true, content: 'Yes', iconCss: 'e-icons e-ok-icon' }, click: btnClick }, { buttonModel: { content: 'No', iconCss: 'e-icons e-close-icon' }, click: btnClick }],
    target: document.body,
    height: 'auto',
    width: '300px',
    animationSettings: { effect: 'Zoom' },
    closeOnEscape: true
});
dialogObj.appendTo('#dialog');

document.getElementById('openBtn').onclick = (): void => {
    dialogObj.show();
};

function btnClick() {
    dialogObj.hide();
}
let hide: any;
let isFullScreen: Boolean;
let dialogOldPositions: any;

document.getElementById("max-btn").addEventListener("click", function() {
  let maximizeIcon;
    if (dialogObj.element.classList.contains('dialog-minimized')) {
      dialogObj.element.querySelector('#min-btn').classList.add('sf-icon-Minimize');
      dialogObj.element.querySelector('#min-btn').classList.remove('sf-icon-Restore');
      dialogObj.element.querySelector('#min-btn').setAttribute('title', 'Minimize');
    }
    if (!dialogObj.element.classList.contains('dialog-maximized') && !isFullScreen) {
      maximizeIcon = dialogObj.element.querySelector(".e-dlg-header-content .sf-icon-Maximize");
    } else {
      maximizeIcon = dialogObj.element.querySelector(".e-dlg-header-content .sf-icon-Restore");
    }
    if (!dialogObj.element.classList.contains('dialog-maximized')) {
      dialogObj.element.classList.add('dialog-maximized');
      dialogObj.show(true);
      maximizeIcon.classList.add('sf-icon-Restore');
      maximizeIcon.setAttribute('title', 'Restore');
      maximizeIcon.classList.remove('sf-icon-Maximize');
      dialogObj.element.querySelector('.e-dlg-content').classList.remove('hide-content');
      isFullScreen = true;
    } else {
      dialogObj.element.classList.remove('dialog-maximized');
      dialogObj.show(false);
      maximizeIcon.classList.remove('sf-icon-Restore');
      maximizeIcon.classList.add('sf-icon-Maximize');
      maximizeIcon.setAttribute('title', 'Maximize');
      dialogObj.element.querySelector('.e-dlg-content').classList.remove('hide-content');
      dialogObj.position = dialogOldPositions;
      dialogObj.dataBind();
      isFullScreen = false;
    }
});

  document.getElementById("min-btn").addEventListener("click", function() {
    let minimizeIcon = dialogObj.element.querySelector(".e-dlg-header-content .sf-icon-Minimize");
    if (!dialogObj.element.classList.contains('e-dlg-fullscreen')) {
      if (!dialogObj.element.classList.contains('dialog-minimized')) {
        dialogOldPositions = { X: dialogObj.position.X, Y: dialogObj.position.Y }
        dialogObj.element.classList.add('dialog-minimized');
        dialogObj.element.classList.remove('dialog-maximized');
        dialogObj.element.querySelector('.e-dlg-content').classList.add('hide-content');
        dialogObj.position = { X: 'center', Y: 'bottom' };
        dialogObj.dataBind();
        minimizeIcon.classList.add('sf-icon-Restore');
        minimizeIcon.setAttribute('title', 'Restore');
      } else {
        dialogObj.element.classList.remove('dialog-minimized');
        dialogObj.element.querySelector('.e-dlg-content').classList.remove('hide-content');
        minimizeIcon.classList.add('sf-icon-Minimize');
        minimizeIcon.setAttribute('title', 'Minimize');
        minimizeIcon.classList.remove('sf-icon-Restore');
        dialogObj.position = dialogOldPositions;
        dialogObj.dataBind();
      }
    } else {
      dialogObj.show(false);
      dialogObj.element.classList.remove('dialog-maximized');
      dialogObj.element.classList.add('dialog-minimized');
      dialogObj.element.querySelector('.e-dlg-content').classList.add('hide-content');
      minimizeIcon.classList.remove('sf-icon-Minimize');
      minimizeIcon.removeAttribute('title');
      dialogObj.position = { X: 'center', Y: 'bottom' };
      dialogObj.dataBind();
      isFullScreen = true;
    }
  });
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Dialog button with icons</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript UI Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-popups/styles/material.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  class="close-dialog">
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="target" class="close-dialog">
            <center><button id="openBtn" class="e-control e-btn">Open</button></center>
            <div id="dialog"> </div>
        </div> 
    </div>
</body>
</html>