Having trouble getting help?
Contact Support
Contact Support
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.
