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();
    }
}

dialog