Add minimize and maximize buttons to the Dialog header
23 Feb 202213 minutes to read
ASP.NET MVC 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.
@using Syncfusion.EJ2.Popups
<div id="target" class="col-lg-12 control-section">
@Html.EJS().Button("normalbtn").Content("Open").Render()
@Html.EJS().Dialog("dialog").AnimationSettings(a=>a.Effect(DialogEffect.Zoom)).Header("<div> <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></div>").Content("This is a dialog with minimize and maximize buttons").ShowCloseIcon(true).CloseOnEscape(true).Width("500px").Target("#target").Buttons(btn=> {
btn.Click("dlgButtonClick").ButtonModel(ViewBag.DefaultButtons1).Add();
btn.Click("dlgButtonClick").ButtonModel(ViewBag.DefaultButtons2).Add();
}).Render()
</div>
<script>
var isFullScreen;
var dialogOldPositions;
document.getElementById('max-btn').onclick = function () {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
var 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').onclick = function () {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
var 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;
}
}
document.getElementById('normalbtn').onclick = function () {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.show();
};
function dlgButtonClick() {
var dialogObj = document.getElementById('dialog').ej2_instances[0];
dialogObj.hide();
}
</script>
<style>
.control-section {
padding-left: 10px;
}
#target {
height: 100%;
min-height: 350px;
}
.e-ok-icon::before {
content: '\e7ff';
}
.e-close-icon::before {
content: '\e825';
}
.control-section {
height: 100%;
min-height: 350px;
}
.dialog-minimized {
top: 261px !important;
}
.control-section {
width: 450px;
height: 500px;
border: 1px solid black;
}
.e-dialog .e-dlg-header {
width: auto;
}
.e-dialog .e-dlg-header .e-icons.sf-icon-Maximize::before,
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize::before,
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore::before {
position: relative;
}
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
.e-dialog .e-dlg-header .e-icons.sf-icon-Maximize,
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
font-size: 14px;
width: 30px;
height: 30px;
line-height: 30px;
float: right;
position: relative;
text-align: center;
cursor: pointer;
}
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize:hover, .e-dialog .e-dlg-header .e-icons.sf-icon-Maximize:hover,
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore:hover {
background-color: #e0e0e0;
border-color: transparent;
box-shadow: 0 0 0 transparent;
border-radius: 50%;
}
.e-dialog .e-dlg-header .e-icons.sf-icon-Minimize,
.e-dialog .e-dlg-header .e-icons.sf-icon-Restore {
padding-left: 5px;
padding-right: 5px;
}
.e-dialog .e-dlg-header {
position: relative;
top: 1px;
}
.e-dialog .e-dlg-content.hide-content, .e-dialog .e-footer-content.hide-content {
display: none;
}
.e-dialog .e-dlg-header span.title {
width: 60px;
display: inline-block;
}
@font-face {
font-family: 'Min-Max_FONT';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj1tSfUAAAEoAAAAVmNtYXDnE+dkAAABlAAAADxnbHlmQCkX6AAAAdwAAADkaGVhZBK7D5EAAADQAAAANmhoZWEIVQQGAAAArAAAACRobXR4FAAAAAAAAYAAAAAUbG9jYQBaAJwAAAHQAAAADG1heHABEgAgAAABCAAAACBuYW1l8Rnd5AAAAsAAAAJhcG9zdDbKxecAAAUkAAAATwABAAAEAAAAAFwEAAAAAAAD+AABAAAAAAAAAAAAAAAAAAAABQABAAAAAQAAK4KTXV8PPPUACwQAAAAAANfSZU4AAAAA19JlTgAAAAAD+AP4AAAACAACAAAAAAAAAAEAAAAFABQAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQQAAZAABQAAAokCzAAAAI8CiQLMAAAB6wAyAQgAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAwQAAAAAXAQAAAAAAAABAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAEAAQAAQAA5wP//wAA5wD//wAAAAEABAAAAAEAAgADAAQAAAAAAA4AKgBMAHIAAQAAAAADkwIyAAMAABMhNSFtAyb82gHOZAAAAAMAAAAAA/gD+AADAAcACwAAAREhESUVITUDIREhA5P82gMm/NplA/D8EALK/aMCXcllZfx1A/AAAQAAAAADkwOSAAsAABMJARcJATcJAScJAWwBTf6zRwFNAU1H/rMBTUf+s/6zA0v+tf61RwFL/rVHAUsBS0f+tQFLAAADAAAAAAP4A/gABQALABMAABMzIREhESURIxEhNQcjESE1MxEh0mQBlP2jAyZl/ghkygMmyvzaAsr9owJdyf2jAfhlZfzaygMmAAAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAMAAEAAQAAAAAAAgAHAA0AAQAAAAAAAwAMABQAAQAAAAAABAAMACAAAQAAAAAABQALACwAAQAAAAAABgAMADcAAQAAAAAACgAsAEMAAQAAAAAACwASAG8AAwABBAkAAAACAIEAAwABBAkAAQAYAIMAAwABBAkAAgAOAJsAAwABBAkAAwAYAKkAAwABBAkABAAYAMEAAwABBAkABQAWANkAAwABBAkABgAYAO8AAwABBAkACgBYAQcAAwABBAkACwAkAV8gTWluLU1heF9GT05UUmVndWxhck1pbi1NYXhfRk9OVE1pbi1NYXhfRk9OVFZlcnNpb24gMS4wTWluLU1heF9GT05URm9udCBnZW5lcmF0ZWQgdXNpbmcgU3luY2Z1c2lvbiBNZXRybyBTdHVkaW93d3cuc3luY2Z1c2lvbi5jb20AIABNAGkAbgAtAE0AYQB4AF8ARgBPAE4AVABSAGUAZwB1AGwAYQByAE0AaQBuAC0ATQBhAHgAXwBGAE8ATgBUAE0AaQBuAC0ATQBhAHgAXwBGAE8ATgBUAFYAZQByAHMAaQBvAG4AIAAxAC4AMABNAGkAbgAtAE0AYQB4AF8ARgBPAE4AVABGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAQIBAwEEAQUBBgAITWluaW1pemUITWF4aW1pemUFQ2xvc2UHUmVzdG9yZQAAAA==) format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="sf-icon-"], [class*=" sf-icon-"] {
font-family: 'Min-Max_FONT' !important;
speak: none;
font-size: 55px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sf-icon-Minimize:before {
content: "\e700";
}
.sf-icon-Maximize:before {
content: "\e701";
}
.sf-icon-Close:before {
content: "\e702";
}
.sf-icon-Restore:before {
content: "\e703";
}
</style>public class HomeController : Controller
{
public class ButtonModel
{
public string content { get; set; }
public bool isPrimary { get; set; }
public string iconCss { get; set; }
}
public ActionResult Index()
{
ViewBag.DefaultButtons1 = new ButtonModel() { content = "YES", isPrimary = true, iconCss = "e-icons e-ok-icon" };
ViewBag.DefaultButtons2 = new ButtonModel() { content = "NO", iconCss = "e-icons e-close-icon" };
return View();
}
}Output be like the below.
