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;