Having trouble getting help?
Contact Support
Contact Support
Add minimize and maximize buttons to the Dialog header
4 Apr 202214 minutes to read
ASP.NET CORE 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.
<div class="col-lg-12 control-section" id="target">
<ejs-button id="normalbtn" content="Open"></ejs-button>
<ejs-dialog id="dialog" width="400px" target="#target" Content="This is a dialog with minimize and maximize buttons"
showCloseIcon="true" 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>">
<e-dialog-animationsettings effect="Zoom"></e-dialog-animationsettings>
<e-dialog-buttons>
<e-dialog-dialogbutton buttonModel="ViewBag.DefaultButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>
<e-dialog-dialogbutton buttonModel="ViewBag.DefaultButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>
</e-dialog-buttons>
</ejs-dialog>
</div>
<style>
.control-section {
padding-left: 10px;
}
.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>
<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>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();
}
}