Add a minimize maximize buttons in React Dialog component

18 Jan 202324 minutes to read

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

[Class-component]

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    settings = { effect: 'Zoom', duration: 400, delay: 0 };
    dialogInstance;
    isFullScreen;
    dialogOldPositions;
    maxBtn;
    minBtn;
    header() {
        return (<div>
          <span className='title'>Dialog</span><span className='e-icons sf-icon-Maximize' id='max-btn' title='Maximize'></span><span className='e-icons sf-icon-Minimize' id='min-btn' title='Minimize'></span>
      </div>);
    }
    buttons = [{
            buttonModel: {
                content: 'Ok',
                iconCss: 'e-icons e-ok-icon',
                isPrimary: true,
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        },
        {
            buttonModel: {
                content: 'No',
                iconCss: 'e-icons e-close-icon',
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        },
    ];
    handleClick() {
        this.dialogInstance.show();
    }
    onCreate() {
        this.maxBtn = document.getElementById('max-btn');
        this.maxBtn.onclick = (e) => {
            var maximizeIcon;
            if (this.dialogInstance.element.classList.contains('dialog-minimized')) {
                this.dialogInstance.element.querySelector('#min-btn').classList.add('sf-icon-Minimize');
                this.dialogInstance.element.querySelector('#min-btn').classList.remove('sf-icon-Restore');
                this.dialogInstance.element.querySelector('#min-btn').setAttribute('title', 'Minimize');
            }
            if (!this.dialogInstance.element.classList.contains('dialog-maximized') && !this.isFullScreen) {
                maximizeIcon = this.dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Maximize");
            }
            else {
                maximizeIcon = this.dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Restore");
            }
            if (!this.dialogInstance.element.classList.contains('dialog-maximized')) {
                this.dialogInstance.element.classList.add('dialog-maximized');
                this.dialogInstance.show(true);
                maximizeIcon.classList.add('sf-icon-Restore');
                maximizeIcon.setAttribute('title', 'Restore');
                maximizeIcon.classList.remove('sf-icon-Maximize');
                this.dialogInstance.element.querySelector('.e-dlg-content').classList.remove('hide-content');
                this.isFullScreen = true;
            }
            else {
                this.dialogInstance.element.classList.remove('dialog-maximized');
                this.dialogInstance.show(false);
                maximizeIcon.classList.remove('sf-icon-Restore');
                maximizeIcon.classList.add('sf-icon-Maximize');
                maximizeIcon.setAttribute('title', 'Maximize');
                this.dialogInstance.element.querySelector('.e-dlg-content').classList.remove('hide-content');
                this.dialogInstance.position = this.dialogOldPositions;
                this.dialogInstance.dataBind();
                this.isFullScreen = false;
            }
        };
        this.minBtn = document.getElementById('min-btn');
        this.minBtn.onclick = (e) => {
            var minimizeIcon = this.dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Minimize");
            if (!this.dialogInstance.element.classList.contains('e-dlg-fullscreen')) {
                if (!this.dialogInstance.element.classList.contains('dialog-minimized')) {
                    this.dialogOldPositions = { X: this.dialogInstance.position.X, Y: this.dialogInstance.position.Y };
                    this.dialogInstance.element.classList.add('dialog-minimized');
                    this.dialogInstance.element.classList.remove('dialog-maximized');
                    this.dialogInstance.element.querySelector('.e-dlg-content').classList.add('hide-content');
                    this.dialogInstance.position = { X: 'center', Y: 'bottom' };
                    this.dialogInstance.dataBind();
                    minimizeIcon.classList.add('sf-icon-Restore');
                    minimizeIcon.setAttribute('title', 'Restore');
                }
                else {
                    this.dialogInstance.element.classList.remove('dialog-minimized');
                    this.dialogInstance.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');
                    this.dialogInstance.position = this.dialogOldPositions;
                    this.dialogInstance.dataBind();
                }
            }
            else {
                this.dialogInstance.show(false);
                this.dialogInstance.element.classList.remove('dialog-maximized');
                this.dialogInstance.element.classList.add('dialog-minimized');
                this.dialogInstance.element.querySelector('.e-dlg-content').classList.add('hide-content');
                minimizeIcon.classList.remove('sf-icon-Minimize');
                minimizeIcon.removeAttribute('title');
                this.dialogInstance.position = { X: 'center', Y: 'bottom' };
                this.dialogInstance.dataBind();
                this.isFullScreen = true;
            }
        };
    }
    render() {
        return (<div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
     <DialogComponent id='dialog' created={this.onCreate.bind(this)} header={this.header} animationSettings={this.settings} showCloseIcon={true} closeOnEscape={true} width='300px' buttons={this.buttons} content='This is a dialog with minimize and maximize buttons' ref={dialog => this.dialogInstance = dialog} target='#dialog-target'/>
  </div>);
    }
}
export default App;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public settings: any = { effect: 'Zoom', duration: 400, delay: 0 };

public dialogInstance: DialogComponent;
public isFullScreen: Boolean;
public dialogOldPositions: any;
public maxBtn:HTMLElement;
public minBtn: HTMLElement;
 header() {
        return (<div>
          <span className='title'>Dialog</span><span className='e-icons sf-icon-Maximize' id='max-btn' title='Maximize'></span><span className='e-icons sf-icon-Minimize' id='min-btn' title='Minimize'></span>
      </div>);
    }
public buttons: any = [{
    buttonModel: {
        content: 'Ok',
        iconCss: 'e-icons e-ok-icon',
        isPrimary: true,
    },
    'click': () => {
        this.dialogInstance.hide();
    }
},
{
    buttonModel: {
        content: 'No',
        iconCss: 'e-icons e-close-icon',
    },
    'click': () => {
        this.dialogInstance.hide();
    }
},
];
public handleClick() {
    this.dialogInstance.show();
}
public onCreate() {
    this.maxBtn = document.getElementById('max-btn') as HTMLElement;
    this.maxBtn.onclick = (e: Event) => {
     var maximizeIcon;
    if (this.dialogInstance.element.classList.contains('dialog-minimized')) {
      this.dialogInstance.element.querySelector('#min-btn').classList.add('sf-icon-Minimize');
      this.dialogInstance.element.querySelector('#min-btn').classList.remove('sf-icon-Restore');
      this.dialogInstance.element.querySelector('#min-btn').setAttribute('title', 'Minimize');
    }
    if (!this.dialogInstance.element.classList.contains('dialog-maximized') && !this.isFullScreen) {
      maximizeIcon = this.dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Maximize");
    } else {
      maximizeIcon = this.dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Restore");
    }
    if (!this.dialogInstance.element.classList.contains('dialog-maximized')) {
      this.dialogInstance.element.classList.add('dialog-maximized');
      this.dialogInstance.show(true);
      maximizeIcon.classList.add('sf-icon-Restore');
      maximizeIcon.setAttribute('title', 'Restore');
      maximizeIcon.classList.remove('sf-icon-Maximize');
      this.dialogInstance.element.querySelector('.e-dlg-content').classList.remove('hide-content');
      this.isFullScreen = true;
    } else {
      this.dialogInstance.element.classList.remove('dialog-maximized');
      this.dialogInstance.show(false);
      maximizeIcon.classList.remove('sf-icon-Restore');
      maximizeIcon.classList.add('sf-icon-Maximize');
      maximizeIcon.setAttribute('title', 'Maximize');
      this.dialogInstance.element.querySelector('.e-dlg-content').classList.remove('hide-content');
      this.dialogInstance.position = this.dialogOldPositions;
      this.dialogInstance.dataBind();
      this.isFullScreen = false;
    }
}
    this.minBtn = document.getElementById('min-btn') as HTMLElement;
    this.minBtn.onclick = (e: Event) => {
        var minimizeIcon = this.dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Minimize");
        if (!this.dialogInstance.element.classList.contains('e-dlg-fullscreen')) {
        if (!this.dialogInstance.element.classList.contains('dialog-minimized')) {
            this.dialogOldPositions = { X: this.dialogInstance.position.X, Y: this.dialogInstance.position.Y }
            this.dialogInstance.element.classList.add('dialog-minimized');
            this.dialogInstance.element.classList.remove('dialog-maximized');
            this.dialogInstance.element.querySelector('.e-dlg-content').classList.add('hide-content');
            this.dialogInstance.position = { X: 'center', Y: 'bottom' };
            this.dialogInstance.dataBind();
            minimizeIcon.classList.add('sf-icon-Restore');
            minimizeIcon.setAttribute('title', 'Restore');
        } else {
            this.dialogInstance.element.classList.remove('dialog-minimized');
            this.dialogInstance.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');
            this.dialogInstance.position = this.dialogOldPositions;
            this.dialogInstance.dataBind();
        }
        } else {
        this.dialogInstance.show(false);
        this.dialogInstance.element.classList.remove('dialog-maximized');
        this.dialogInstance.element.classList.add('dialog-minimized');
        this.dialogInstance.element.querySelector('.e-dlg-content').classList.add('hide-content');
        minimizeIcon.classList.remove('sf-icon-Minimize');
        minimizeIcon.removeAttribute('title');
        this.dialogInstance.position = { X: 'center', Y: 'bottom' };
        this.dialogInstance.dataBind();
        this.isFullScreen = true;
        }
    }
}

  
public render() {
  return (
  <div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
     <DialogComponent id='dialog' created={this.onCreate.bind(this)} header={this.header} animationSettings={this.settings} showCloseIcon={true} closeOnEscape={true}
      width='300px' buttons={this.buttons} content='This is a dialog with minimize and maximize buttons' ref={dialog => this.dialogInstance = dialog!}
      target='#dialog-target'/>
  </div>);
}
}
export default App;

[functional-component]

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let settings = { effect: 'Zoom', duration: 400, delay: 0 };
    let dialogInstance;
    let isFullScreen;
    let dialogOldPositions;
    let maxBtn;
    let minBtn;
    function header() {
        return (<div>
        <span className='title'>Dialog</span><span className='e-icons sf-icon-Maximize' id='max-btn' title='Maximize'></span><span class='e-icons sf-icon-Minimize' id='min-btn' title='Minimize'></span>
    </div>);
    }
    let buttons = [{
            buttonModel: {
                content: 'Ok',
                iconCss: 'e-icons e-ok-icon',
                isPrimary: true,
            },
            'click': () => {
                dialogInstance.hide();
            }
        },
        {
            buttonModel: {
                content: 'No',
                iconCss: 'e-icons e-close-icon',
            },
            'click': () => {
                dialogInstance.hide();
            }
        },
    ];
    function handleClick() {
        dialogInstance.show();
    }
    function onCreate() {
        maxBtn = document.getElementById('max-btn');
        maxBtn.onclick = (e) => {
            var maximizeIcon;
            if (dialogInstance.element.classList.contains('dialog-minimized')) {
                dialogInstance.element.querySelector('#min-btn').classList.add('sf-icon-Minimize');
                dialogInstance.element.querySelector('#min-btn').classList.remove('sf-icon-Restore');
                dialogInstance.element.querySelector('#min-btn').setAttribute('title', 'Minimize');
            }
            if (!dialogInstance.element.classList.contains('dialog-maximized') && !isFullScreen) {
                maximizeIcon = dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Maximize");
            }
            else {
                maximizeIcon = dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Restore");
            }
            if (!dialogInstance.element.classList.contains('dialog-maximized')) {
                dialogInstance.element.classList.add('dialog-maximized');
                dialogInstance.show(true);
                maximizeIcon.classList.add('sf-icon-Restore');
                maximizeIcon.setAttribute('title', 'Restore');
                maximizeIcon.classList.remove('sf-icon-Maximize');
                dialogInstance.element.querySelector('.e-dlg-content').classList.remove('hide-content');
                isFullScreen = true;
            }
            else {
                dialogInstance.element.classList.remove('dialog-maximized');
                dialogInstance.show(false);
                maximizeIcon.classList.remove('sf-icon-Restore');
                maximizeIcon.classList.add('sf-icon-Maximize');
                maximizeIcon.setAttribute('title', 'Maximize');
                dialogInstance.element.querySelector('.e-dlg-content').classList.remove('hide-content');
                dialogInstance.position = dialogOldPositions;
                dialogInstance.dataBind();
                isFullScreen = false;
            }
        };
        minBtn = document.getElementById('min-btn');
        minBtn.onclick = (e) => {
            var minimizeIcon = dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Minimize");
            if (!dialogInstance.element.classList.contains('e-dlg-fullscreen')) {
                if (!dialogInstance.element.classList.contains('dialog-minimized')) {
                    dialogOldPositions = { X: dialogInstance.position.X, Y: dialogInstance.position.Y };
                    dialogInstance.element.classList.add('dialog-minimized');
                    dialogInstance.element.classList.remove('dialog-maximized');
                    dialogInstance.element.querySelector('.e-dlg-content').classList.add('hide-content');
                    dialogInstance.position = { X: 'center', Y: 'bottom' };
                    dialogInstance.dataBind();
                    minimizeIcon.classList.add('sf-icon-Restore');
                    minimizeIcon.setAttribute('title', 'Restore');
                }
                else {
                    dialogInstance.element.classList.remove('dialog-minimized');
                    dialogInstance.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');
                    dialogInstance.position = dialogOldPositions;
                    dialogInstance.dataBind();
                }
            }
            else {
                dialogInstance.show(false);
                dialogInstance.element.classList.remove('dialog-maximized');
                dialogInstance.element.classList.add('dialog-minimized');
                dialogInstance.element.querySelector('.e-dlg-content').classList.add('hide-content');
                minimizeIcon.classList.remove('sf-icon-Minimize');
                minimizeIcon.removeAttribute('title');
                dialogInstance.position = { X: 'center', Y: 'bottom' };
                dialogInstance.dataBind();
                isFullScreen = true;
            }
        };
    }
    return (<div className="App" id='dialog-target'>
          <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
        <DialogComponent id='dialog' created={onCreate.bind(this)} header={header} animationSettings={settings} showCloseIcon={true} closeOnEscape={true} width='300px' buttons={buttons} content='This is a dialog with minimize and maximize buttons' ref={dialog => dialogInstance = dialog} target='#dialog-target'/>
      </div>);
}
export default App;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App(){
  let settings: any = { effect: 'Zoom', duration: 400, delay: 0 };
  let dialogInstance: DialogComponent;
  let isFullScreen: Boolean;
  let dialogOldPositions: any;
  let maxBtn:HTMLElement;
  let minBtn: HTMLElement;
  function header() {
      return (<div>
        <span className='title'>Dialog</span><span className='e-icons sf-icon-Maximize' id='max-btn' title='Maximize'></span><span class='e-icons sf-icon-Minimize' id='min-btn' title='Minimize'></span>
    </div>);
  }
  let buttons: any = [{
      buttonModel: {
          content: 'Ok',
          iconCss: 'e-icons e-ok-icon',
          isPrimary: true,
      },
      'click': () => {
          dialogInstance.hide();
      }
  },
  {
      buttonModel: {
          content: 'No',
          iconCss: 'e-icons e-close-icon',
      },
      'click': () => {
          dialogInstance.hide();
      }
  },
  ];

  function handleClick() {
      dialogInstance.show();
  }

  function onCreate() {
      maxBtn = document.getElementById('max-btn') as HTMLElement;
      maxBtn.onclick = (e: Event) => {
       var maximizeIcon;
      if (dialogInstance.element.classList.contains('dialog-minimized')) {
        dialogInstance.element.querySelector('#min-btn').classList.add('sf-icon-Minimize');
        dialogInstance.element.querySelector('#min-btn').classList.remove('sf-icon-Restore');
        dialogInstance.element.querySelector('#min-btn').setAttribute('title', 'Minimize');
      }
      if (!dialogInstance.element.classList.contains('dialog-maximized') && !isFullScreen) {
        maximizeIcon = dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Maximize");
      } else {
        maximizeIcon = dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Restore");
      }
      if (!dialogInstance.element.classList.contains('dialog-maximized')) {
        dialogInstance.element.classList.add('dialog-maximized');
        dialogInstance.show(true);
        maximizeIcon.classList.add('sf-icon-Restore');
        maximizeIcon.setAttribute('title', 'Restore');
        maximizeIcon.classList.remove('sf-icon-Maximize');
        dialogInstance.element.querySelector('.e-dlg-content').classList.remove('hide-content');
        isFullScreen = true;
      } else {
        dialogInstance.element.classList.remove('dialog-maximized');
        dialogInstance.show(false);
        maximizeIcon.classList.remove('sf-icon-Restore');
        maximizeIcon.classList.add('sf-icon-Maximize');
        maximizeIcon.setAttribute('title', 'Maximize');
        dialogInstance.element.querySelector('.e-dlg-content').classList.remove('hide-content');
        dialogInstance.position = dialogOldPositions;
        dialogInstance.dataBind();
        isFullScreen = false;
      }
    }
    minBtn = document.getElementById('min-btn') as HTMLElement;
    minBtn.onclick = (e: Event) => {
        var minimizeIcon = dialogInstance.element.querySelector(".e-dlg-header-content .sf-icon-Minimize");
        if (!dialogInstance.element.classList.contains('e-dlg-fullscreen')) {
        if (!dialogInstance.element.classList.contains('dialog-minimized')) {
            dialogOldPositions = { X: dialogInstance.position.X, Y: dialogInstance.position.Y }
            dialogInstance.element.classList.add('dialog-minimized');
            dialogInstance.element.classList.remove('dialog-maximized');
            dialogInstance.element.querySelector('.e-dlg-content').classList.add('hide-content');
            dialogInstance.position = { X: 'center', Y: 'bottom' };
            dialogInstance.dataBind();
            minimizeIcon.classList.add('sf-icon-Restore');
            minimizeIcon.setAttribute('title', 'Restore');
        } else {
            dialogInstance.element.classList.remove('dialog-minimized');
            dialogInstance.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');
            dialogInstance.position = dialogOldPositions;
            dialogInstance.dataBind();
        }
        } else {
        dialogInstance.show(false);
        dialogInstance.element.classList.remove('dialog-maximized');
        dialogInstance.element.classList.add('dialog-minimized');
        dialogInstance.element.querySelector('.e-dlg-content').classList.add('hide-content');
        minimizeIcon.classList.remove('sf-icon-Minimize');
        minimizeIcon.removeAttribute('title');
        dialogInstance.position = { X: 'center', Y: 'bottom' };
        dialogInstance.dataBind();
        isFullScreen = true;
        }
      }
    }
    return (
      <div className="App" id='dialog-target'>
          <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
        <DialogComponent id='dialog' created={onCreate.bind(this)} header={header} animationSettings={settings} showCloseIcon={true} closeOnEscape={true}
          width='300px' buttons={buttons} content='This is a dialog with minimize and maximize buttons' ref={dialog => dialogInstance = dialog!}
          target='#dialog-target'/>
      </div>
    );
}

export default App;