How to

Create Nested Dialog

A Dialog can be nested within another Dialog. The below sample contains parent and child Dialog (inner Dialog).

Step 1:

Create two div elements with id #dialog and #innerDialog.

Step 2:

Initialize the Dialog as mentioned in the below sample.

Step 3:

Set the inner Dialog target as #dialog.

razor
NestedDialog.cs
@section ControlsSection{
<div id='container'>
    @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
    @Html.EJS().Dialog("dialog").Header("Outer Dialog").ShowCloseIcon(true).Target("#container").Height("300px").CloseOnEscape(false).Width("400px").AnimationSettings(new DialogAnimationSettings { Effect = DialogEffect.None }).Render()
    @Html.EJS().Dialog("innerDialog").ShowCloseIcon(true).Header("Inner Dialog").CloseOnEscape(false).Content("This is a Nested Dialog").Target("#dialog").Height("150px").AnimationSettings(new DialogAnimationSettings { Effect=DialogEffect.None }).Width("250px").Render()
</div>
}

<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            var innerDialog = document.getElementById("innerDialog").ej2_instances[0];
            dialog.show();
            innerDialog.show();
        }
    }
</script>
public ActionResult NestedDialog()
{
    return View();
}

Output be like the below.

dialog

Position the Dialog on center of the page on scrolling

By default, when scroll the page/container Dialog also scrolled along with the page/container. When a user expects to display the Dialog in the same position without scrolling achieving this in sample level as like below. Here added ‘e-fixed’ class to Dialog element and prevent the scrolling.

razor
Scrolling.cs
@section ControlsSection{

    <div id='container'>
        <div>
            <b>JavaScript:</b><br />
            JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It has been standardized in the ECMAScript
            language specification. Alongside HTML and CSS, it is one of the three essential technologies of World Wide Web
            content production; the majority of websites employ it and it is supported by all modern Web browsers without
            plug-ins. JavaScript is prototype-based with first-class functions, making it a multi-paradigm language, supporting
            object - oriented , imperative, and functional programming styles.
            <br /><br /><br />
            <b>MVC:</b><br />
            Model–view–controller (MVC) is a software architecture pattern which separates the representation of information from the user's interaction with it. The model consists of application data, business rules, logic, and functions. A view can be any output representation of data, such as a chart or a diagram. Multiple views of the same data are possible, such as a bar chart for management and a tabular view for accountants. The controller mediates input, converting it to commands for the model or view.The central ideas behind MVC are code reusability and in addition to dividing the application into three kinds of components, the MVC design defines the interactions between them.
            A controller can send commands to its associated view to change the view's presentation of the model (e.g., by scrolling through a document). It can also send commands to the model to update the model's state (e.g., editing a document).
            A model notifies its associated views and controllers when there has been a change in its state. This notification allows the views to produce updated output, and the controllers to change the available set of commands. A passive implementation of MVC omits these notifications, because the application does not require them or the software platform does not support them.
            A view requests from the model the information that it needs to generate an output representation to the user.
        </div>
        @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
        @Html.EJS().Dialog("dialog").Header("Dialog").CloseOnEscape(false).Target("#container").Width("250px").Content(ViewBag.content).Render()
    </div>
}

<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.cssClass = 'e-fixed';
        }
    }
</script>
public ActionResult Scrolling()
{
     ViewBag.content = "<button class='e-control e-btn' id='targetButton' role='button'>Prevent Dialog Scroll</button>";
    return View();
}

Load dialog content using AJAX

You can load dialog’s content dynamically from external source like external file using AJAX library. The AJAX library can make the request and load dialog’s content using its success event. Refer the following link to learn about how to load dialog content using AJAX.

AJAX Content

Render a dialog without header

The dialog can be rendered without header by setting the header property value as empty string or null. By default, dialog is rendered without header.

razor
header.cs
@section ControlsSection{
    <div id="container">
        @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
        @Html.EJS().Dialog("dialog").Content("This is a dialog without header.").Target("#container").Width("250px").Buttons(ViewBag.DialogButtons).Render()
    </div>

}

<script>
    document.getElementById('targetButton').onclick = function () {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.show();
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        public class ButtonModel
        {
            public string content { get; set; }
            public bool isPrimary { get; set; }
            public string cssClass { get; set; }
            public string Click { get; set; }

        }

        // GET: RTL
        public ActionResult Footer()
        {
            List<DialogDialogButton> button = new List<DialogDialogButton>();
            button.Add(new DialogDialogButton() { ButtonModel = new ButtonModel() { Click = "dlgButtonClick", isPrimary = true, cssClass = "e-flat", content = "OK" } });
            button.Add(new DialogDialogButton() { ButtonModel = new ButtonModel() { Click = "dlgButtonClick", content = "Cancel", cssClass = "e-flat" } });
            ViewBag.DialogButtons = button;
            return View();
        }
        return View();
    }
}

Show dialog with full screen

You can show the dialog in fullscreen by passing true as argument to the dialog show method.

razor
fullscreen.cs
@section ControlsSection{
    <div id="container">
        @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
        @Html.EJS().Dialog("dialog").Header("Dialog").Content("This is a Dialog with fullscreen display.").Target("#container").Width("250px").Buttons(ViewBag.DialogButtons).Render()
    </div>

}

<script>
    document.getElementById('targetButton').onclick = function () {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.show();
    }
    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        public class ButtonModel
        {
            public string content { get; set; }
            public bool isPrimary { get; set; }
            public string cssClass { get; set; }
            public string Click { get; set; }

        }

        // GET: RTL
        public ActionResult Footer()
        {
            List<DialogDialogButton> button = new List<DialogDialogButton>();
            button.Add(new DialogDialogButton() { ButtonModel = new ButtonModel() { Click = "dlgButtonClick", isPrimary = true, cssClass = "e-flat", content = "OK" } });
            button.Add(new DialogDialogButton() { ButtonModel = new ButtonModel() { Click = "dlgButtonClick", content = "Cancel", cssClass = "e-flat" } });
            ViewBag.DialogButtons = button;
            return View();
        }
        return View();
    }
}

Display a dialog with custom position

By default, the dialog is displayed in the center of the target container. The dialog position can be set using the position property by providing custom X and Y coordinates. The dialog can be positioned inside the target based on the given X and Y values.

razor
position.cs
@section ControlsSection{
    <div id="container">
        @Html.EJS().Dialog("firstDialog").Header("Position-01").Content("The dialog is positioned at {X: 160, Y: 14} co-ordinates.").Position(new Syncfusion.EJ2.Popups.DialogPositionData { X="160", Y ="12" }).Target("#container").Width("360px").Height("120px").Render()
        @Html.EJS().Dialog("secondDialog").Header("Position-02").Content("The dialog is positioned at {X: 160, Y: 240} co-ordinates.").Position(new Syncfusion.EJ2.Popups.DialogPositionData { X="160", Y ="240" }).Target("#container").Width("360px").Height("120px").Render()
    </div>

}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        return View();
    }
}

Output be like the below.

dialog

Prevent closing of modal dialog

You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

razor
@section ControlsSection{
    <div id="container">
        @Html.EJS().Button("targetButton").Content("Open Dialog").Render()
        @Html.EJS().Dialog("dialog").Header("Sign In").BeforeClose("validation").Content("<div class='wrap'><div id='input-container'>
    <div class='e-float-input'><input id='textvalue' type='text' required/><span class='e-float-line'></span>
            <label class='e-float-text'>Username </label>
        </div>
    </div><div class='form-group'>
    <div class='e-float-input'>
            <input id='textvalue2' type='Password' required/>
            <span class='e-float-line'></span>
            <label class='e-float-text'>Password</label>
        </div></div>").Target("#container").Width("300px").Buttons(ViewBag.DialogButtons).Render()
    </div>

}

<script>
    // To get the all input fields and its container.

    let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

    // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

    for (let i = 0; i < inputElement.length; i++) {
        inputElement[i].addEventListener("focus", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.add('e-input-focus');
            } else {
                this.parentNode.classList.add('e-input-focus');
            }
        });
        inputElement[i].addEventListener("blur", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.remove('e-input-focus');
            } else {
                this.parentNode.classList.remove('e-input-focus');
            }
        });
    }

    // Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

    var inputIcon = document.querySelectorAll('.e-input-group-icon');
    for (let i = 0; i < inputIcon.length; i++) {
        inputIcon[i].addEventListener('mousedown', function () {
            this.classList.add('e-input-btn-ripple');
        });
        inputIcon[i].addEventListener('mouseup', function () {
            let element = this;
            setTimeout(function () {
                element.classList.remove('e-input-btn-ripple');
            }, 500);
        });
    }
    document.getElementById('targetButton').onclick = function () {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.show();
        document.getElementById("textvalue").value = "";
        document.getElementById("textvalue2").value = "";
    };

    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }

    function validation(args) {
        let text = document.getElementById('textvalue');
        let text1 = document.getElementById('textvalue2');
        if (text.value === "" && text1.value === "") {
            args.cancel= true;
            alert("Enter the username and password")
        } else if (text.value === "") {
            args.cancel= true;
            alert("Enter the username")
        } else if (text1.value === "") {
            args.cancel= true;
            alert("Enter the password")
        } else if (text.value.length < 4) {
            args.cancel= true;
            alert("Username must be minimum 4 characters")
        } else {
            args.cancel= false;
            document.getElementById("textvalue").value = "";
            document.getElementById("textvalue2").value = "";
        }
    }
</script>

Prevent opening of the dialog

You can prevent opening of the dialog by setting the beforeOpen event argument cancel value to true. In the following sample, the success dialog is opened when you enter the username value with minimum 4 characters. Otherwise, it will not be opened.

razor
check.cs
@section ControlsSection{
    <div id="container">
        <div class="login-form">
            <div class='wrap'>
                <div id="heading">Sign in</div>
                <div id="input-container">
                    <div class="e-float-input e-input-group">
                        <input id="textvalue" type="text" required/>
                        <span class="e-float-line"></span>
                        <label class="e-float-text">Username</label>
                    </div>
                    <div class="e-float-input e-input-group">
                        <input id="textvalue2" type="password" required/>
                        <span class="e-float-line"></span>
                        <label class="e-float-text">Password</label>
                    </div>
                </div>
              <div class="button-contain">
                <button class="e-control e-btn e-info" id="targetButton" role="button" e-ripple="true" >Log in</button>
              </div>
            </div>
         </div>
        @Html.EJS().Dialog("dialog").Header("Dialog").Content("This is a Dialog with full screen display.").Target("#container").Width("250px").Buttons(ViewBag.DialogButtons).Render()
    </div>

}

<script>
    // To get the all input fields and its container.

    let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

    // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

    for (let i = 0; i < inputElement.length; i++) {
        inputElement[i].addEventListener("focus", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.add('e-input-focus');
            } else {
                this.parentNode.classList.add('e-input-focus');
            }
        });
        inputElement[i].addEventListener("blur", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.remove('e-input-focus');
            } else {
                this.parentNode.classList.remove('e-input-focus');
            }
        });
    }

    // Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

    var inputIcon = document.querySelectorAll('.e-input-group-icon');
    for (let i = 0; i < inputIcon.length; i++) {
        inputIcon[i].addEventListener('mousedown', function () {
            this.classList.add('e-input-btn-ripple');
        });
        inputIcon[i].addEventListener('mouseup', function () {
            let element = this;
            setTimeout(function () {
                element.classList.remove('e-input-btn-ripple');
            }, 500);
        });
    }

    function dlgButtonClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }

    function validation(args) {
        let text = document.getElementById('textvalue');
        let text1 = document.getElementById('textvalue2');
        if (text.value === "" && text1.value === "") {
            args.cancel= true;
            alert("Enter the username and password")
        } else if (text.value === "") {
            args.cancel= true;
            alert("Enter the username")
        } else if (text1.value === "") {
            args.cancel= true;
            alert("Enter the password")
        } else if (text.value.length < 4) {
            args.cancel= true;
            alert("Username must be minimum 4 characters")
        } else {
            args.cancel= false;
            document.getElementById("textvalue").value = "";
            document.getElementById("textvalue2").value = "";
        }
    }
</script>

<style>
html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;  
    width: 30%;
}

#dialog.e-dialog .e-dlg-header-content .e-dlg-header {
    text-align: center;
    width:100%;
    color: #333;
    font-weight: bold;
    font-size: 20px;
}

#input-container .e-float-input { /* csslint allow: adjoining-classes */
  margin: 17px 0;
}

.text-center {
    text-align: center;
}


.e-footer-content {
    padding: 20px 0 0;
    width: 100%;
}

.e-dialog .e-footer-content .e-btn {
    width: 100%;
    height: 36px;
}

#heading {
    color: #333;
    font-weight: bold;
    margin: 0 0 15px;
    text-align: center;
    font-size: 20px;
}

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  width: 260px;
}

#dialog.e-dialog .e-footer-content {	
    padding: 0 18px 18px;
}

#dialog.e-dialog .e-footer-content .e-btn {
    margin-left: 0;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        public class ButtonModel
        {
            public string content { get; set; }
            public bool isPrimary { get; set; }
            public string Click { get; set; }

        }

        // GET: RTL
        public ActionResult Footer()
        {
            List<DialogDialogButton> button = new List<DialogDialogButton>();
            button.Add(new DialogDialogButton() { ButtonModel = new ButtonModel() { Click = "dlgButtonClick", isPrimary = true, content = "Dismiss" } });
            ViewBag.DialogButtons = button;
            return View();
        }
        return View();
    }
}

Read all the values from dialog on button click

You can read the dialog element values by binding the action handler to the footer buttons. The buttons property provides the options to bind events to the action buttons. For detailed information about buttons , refer to the footer section. In the below sample, value of input elements within the dialog has been checked in the footer button click event and send the values as the content of confirmation dialog.

razor
controller.cs
@section ControlsSection{
    <div id="target" class="col-lg-12 control-section">
        @Html.EJS().Button("normalbtn").Content("Open").Render()
        @Html.EJS().Dialog("dialog").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom }).Header("User Details").Content("<form><div class='form-group'><label for='name'>Name:</label><input type='name' value='' class='form-control' id='name'></div><div class='form-group'><label for='email'>Email Id:</label><input type='email' value='user@syncfusion.com' class='form-control' id='email'></div><div class='form-group'><label for='contact'>Contact Number:</label><input type='contact' class='form-control' id='contact'></div><div class='form-group'><label for='address'>Address:</label><textarea class='form-control' rows='5' id='address'></textarea></div></form>").ShowCloseIcon(true).Width("400px").Target("#target").Buttons(ViewBag.DialogButtons).Render()
        @Html.EJS().Dialog("model_dialog").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom }).Header("User Details").Visible(false).ShowCloseIcon(true).IsModal(true).Target("#target").Buttons(ViewBag.DialogButtons).Render()
    </div>
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

@section PreScripts {
    <script>
        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();
        }
        function returnClick() {
            var dialogObj = document.getElementById('dialog').ej2_instances[0];
            dialogObj.hide();
            var dialogObj1 = document.getElementById('model_dialog').ej2_instances[0];
            dialogObj1.show();
        }
        function submitButtonClick() {
            var dialogObj = document.getElementById('dialog').ej2_instances[0];
            dialogObj.hide();
            var dialogObj1 = document.getElementById('model_dialog').ej2_instances[0];
            dialogObj1.content = this.getDynamicContent();
            dialogObj1.show();
        }        
        function getDynamicContent() {
            var input =  document.getElementById('dialog').querySelector('#name');
            var email =  document.getElementById('dialog').querySelector('#email');
            var contact =  document.getElementById('dialog').querySelector('#contact');
            var address =  document.getElementById('dialog').querySelector('#address');
            var template = "<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><b>Confirm your details</b></div>" +
                "</div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='name'> Name: </span>" +
                "</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='nameValue'>"+ input.value + "</span> </div></div>" +
                "<div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='email'> Email: </span>" +
                "</div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='emailValue'>" + email.value + 
                "</span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
                "<span id='Contact'> Contact number: </span></div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
                "<span id='contactValue'>"+ contact.value +" </span></div></div><div class='row'><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'>"+
                "<span id='Address'> Address: </span> </div><div class='col-xs-6 col-sm-6 col-lg-6 col-md-6'><span id='AddressValue'>" + address.value +"</span></div></div>"
            return template;
        }
    </script>
}
<style>
    .control-section {
        padding-left: 10px;
    }
    #target {
        height: 100%;
        min-height: 350px;
    }
    #model_dialog {
        margin: 20px;
    }
    .row {
        padding: 10px 3px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        public class ButtonModel
        {
            public string content { get; set; }
            public bool isPrimary { get; set; }

        }

        // GET: RTL
        public IActionResult DialogButtons()
        {
            ViewBag.button = new
            {
                content = "YES",
                isPrimary = true
            };
            ViewBag.button1 = new
            {
                content = "NO"
            };            
            ViewBag.submit = new
            {
                isPrimary = true,
                content = "Submit"
            };
            
            return View();
        }
        return View();
    }
}

Customize the dialog appearance

You can customize the dialog appearance by providing dialog template as string or HTML element to the content property. In the following sample, dialog is customized as error window appearance.

razor
controller.cs
@section ControlsSection{
    <div id="target" class="col-lg-12 control-section">
        @Html.EJS().Button("normalbtn").Content("Open").Render()
        @Html.EJS().Dialog("dialog").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom }).Header("File and Folder Rename").Content("<div class = 'dialog-content'><div class='msg-wrapper  col-lg-12'><span class='e-icons close-icon col-lg-2'></span> <span  class='error-msg col-lg-10'>Can not rename 'pictures' because a file or folder with that name already exists </span> </div><div class='error-detail col-lg-8'><span>Specify a different name</span> </div></div>").ShowCloseIcon(true).Width("400px").Target("#target").Buttons(ViewBag.DialogButtons).Render()
    </div>
}

@section PreScripts {
    <script>
        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;
    }

    span.close-icon {
        width: 24px;
        height: 24px;
        position: relative;
        display: inline-block;
    }
    span.error-msg {
        color: #66afe9;
        display: inline-block;
        position: relative;
    }
    .error-detail.col-lg-8 {
        position: relative;
        left: 45px;
        margin: 20px 0px 21px;
    }
    .e-icons.close-icon.col-lg-2:before {
        content: '\e7e9';
        font-size: 26px;
        color:#d9534f;
        position: relative;
        left: -12px;
    }

    .e-dialog .e-footer-content {
        background-color: #f8f8f8;
    }

    .e-dialog.e-control.e-popup, .e-dialog.e-control.e-popup .e-dlg-header-content {
        background-color: #d9edf7;
    }
    .e-dialog.e-control.e-popup {
        padding:3px;
    }
    .e-dialog.e-control .e-dlg-header-content {
        padding: 10px;
    }
    .e-dialog.e-control .e-footer-content {
        padding: 8px 12px;
    }

    .e-dialog.e-control .e-dlg-content {
        padding: 15px 0px 0px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        public class ButtonModel
        {
            public string content { get; set; }
            public bool isPrimary { get; set; }

        }

        // GET: RTL
        public IActionResult DialogButtons()
        {
            ViewBag.button = new
            {
                content = "YES",
                isPrimary = true
            };
            ViewBag.button1 = new
            {
                content = "NO"
            };
            return View();
        }
        return View();
    }
}

Output be like the below.

dialog

Close dialog while click on outside of dialog

By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header. It can also be closed by clicking outside of the dialog using hide method. Set the CloseOnEscape property value to false to prevent closing of the dialog when pressing Esc key.

In the following sample, dialog is closed when clicking outside the dialog area using hide method.

razor
controller.cs
@section ControlsSection{
    <div id="target" class="col-lg-12 control-section">
        @Html.EJS().Button("normalbtn").Content("Open").Render()
        @Html.EJS().Dialog("dialog").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom }).Header("Delete Multiple Items").Content("Are you sure you want to permanently delete all of these items?").ShowCloseIcon(true).CloseOnEscape(true).Width("500px").Target("#target").Buttons(ViewBag.DialogButtons).Render()
    </div>
}

@section PreScripts {
    <script>
        document.getElementById('normalbtn').onclick = function () {
            var dialogObj = document.getElementById('dialog').ej2_instances[0];
            dialogObj.show();
        };
        document.getElementById('target').onclick = function (args) {
            if (args.target.tagName != "BUTTON") {
                var dialogObj = document.getElementById('dialog').ej2_instances[0];
                dialogObj.hide();
            }
        };
        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;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        public class ButtonModel
        {
            public string content { get; set; }
            public bool isPrimary { get; set; }

        }

        // GET: RTL
        public IActionResult DialogButtons()
        {
            ViewBag.button = new
            {
                content = "YES",
                isPrimary = true
            };
            ViewBag.button1 = new
            {
                content = "NO"
            };
            return View();
        }
        return View();
    }
}

Add an icons to dialog buttons

You can add an icons to the dialog buttons using the buttons property or footerTemplate property . For detailed information about dialog buttons, refer to the documentation section.

In the following sample, dialog footer buttons are customized with icons using buttons property.

razor
controller.cs
@section ControlsSection{
    <div id="target" class="col-lg-12 control-section">
        @Html.EJS().Button("normalbtn").Content("Open").Render()
        @Html.EJS().Dialog("dialog").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom }).Header("Delete Multiple Items").Content("Are you sure you want to permanently delete all of these items?").ShowCloseIcon(true).CloseOnEscape(true).Width("500px").Target("#target").Buttons(ViewBag.DialogButtons).Render()
    </div>
}

@section PreScripts {
    <script>
        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';
        }
    </style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        public class ButtonModel
        {
            public string content { get; set; }
            public bool isPrimary { get; set; }
            public string iconCss { get; set; }

        }

        // GET: RTL
        public IActionResult DialogButtons()
        {
            ViewBag.button = new
            {
                content = "YES",
                isPrimary = true,
                iconCss = "e-icons e-ok-icon"
            };
            ViewBag.button1 = new
            {
                content = "NO",
                iconCss = "e-icons e-cancel-icon"
            };
            return View();
        }
        return View();
    }
}

Output be like the below.

dialog

In the following sample, dialog footer buttons are customized with icons using footertemplate property.

razor
footer.cs
@section ControlsSection{
    <div id="target" class="col-lg-12 control-section">
        @Html.EJS().Button("normalbtn").Content("Open").Render()
        @Html.EJS().Dialog("dialog").Created("onLoad").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom }).Header("Delete Multiple Items").Content("Are you sure you want to permanently delete all of these items?").ShowCloseIcon(true).CloseOnEscape(true).Width("500px").Target("#target").FooterTemplate("<div><button id='Button1' class='e-control e-btn e-primary e-flat' data-ripple='true'><span class='e-btn-icon e-icons e-ok-icon e-icon-left'></span>Yes</button><button id='Button2' class='e-control e-btn e-flat' data-ripple='true'><span class='e-btn-icon e-icons e-close-icon e-icon-left'></span>No</button></div>").Render()
    </div>
}

@section PreScripts {
    <script>
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        document.getElementById('normalbtn').onclick = function () {
            dialogObj.show();
        };
        function onLoad() {
            document.getElementById('Button1').onclick = function () {
                dialogObj.hide();
            };
            document.getElementById('Button2').onclick = function () {
                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';
        }
    </style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        return View();
    }
}

Output be like the below.

dialog

Add controls inside the dialog

You can add controls inside the dialog by using the ContentTemplate API in dialog component. Also, by using this API, HTML elements can be provided as a dialog content.

The following example demonstrates how to add essential js2 date picker and uploader component inside the dialog component.

razor
content.cs
@section ControlsSection{

<div class="row dialog-wrapper">
    @Html.EJS().Button("openBtn").CssClass(".dlgbtn").Content("Open Dialog").Render()
    <div class="col-md-6">
        <div id="container">
            @Html.EJS().Dialog("dialog").Target("#container").Created("onLoad").Width("450px").ContentTemplate(@<div class="col-lg-12 control-section">
                <div class="content-wrapper">
                    <div class="row">
                        @Html.EJS().DropDownList("IncidentType").Placeholder("Incident Type").DataSource((IEnumerable<object>)ViewBag.data).Render()
                    </div><div class="row">
                        @Html.EJS().DropDownList("SuggestedBy").Placeholder("Suggested By").DataSource((IEnumerable<object>)ViewBag.data1).Render()
                    </div><div class="row">
                        @Html.EJS().DatePicker("ChooseDate").Placeholder("Choose a Date").Render()
                    </div><div class="row"><textarea id="textInput" class="e-input"></textarea></div>
                    <div class="row">
                        @Html.EJS().Uploader("UploadFiles").AutoUpload(false).AsyncSettings(new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save", RemoveUrl = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove" }).Render()
                    </div>
                </div>
            </div>
        ).Buttons(ViewBag.dlgButton).Render()

        </div>
    </div>
</div>
    
}

<script>
    function alertBtnClick() {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.hide();
    }

    function onLoad() {
        document.getElementById('openBtn').onclick = function () {
            var dialogObj = document.getElementById('dialog').ej2_instances[0];
            dialogObj.show();
        };
    }
</script>

<style>
    .dialog-wrapper {
        height: 500px;
        position: relative;
        top: 75px;
    }

    #container {
        height: 450px;
        width: 100%;
    }

    .content-wrapper {
        width: 90%;
        margin-left: 20px;
    }

    .content-wrapper .row {
        margin-top: 24px;
    }
</style>
public ActionResult content()
{
    return View();
}

The output will be as follows.

dialog

Render a dialog using utility functions

The dialog component provides built-in utility functions to render the alert and confirm dialogs with the minimal code. The following options are used as an argument on calling the utility functions:

Options Description
title Specifies the title of dialog like the header property.
content Specifies the value that can be displayed in dialog’s content area like the content property.
isModal Specifies the Boolean value whether the dialog can be displayed as modal or non-modal. For more details, refer to the isModal property.
position Specifies the value where the alert or confirm dialog is positioned within the document. For more details, refer to the position property { X: ‘center’, Y: ‘center’}
okButton Configures the OK button that contains button properties with the click events. okButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for OK button click', text: 'Yes' // <-- Default value is 'OK' }
cancelButton Configures the Cancel button that contains button properties with the click events. cancelButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for ‘Cancel’ button click', text: 'No' // <-- Default value is 'Cancel'}
isDraggable Specifies the value whether the alert or confirm dialog can be dragged by the user.
showCloseIcon When set to true, the close icon is shown in the dialog component.
closeOnEscape When set to true, you can close the dialog by pressing ESC key.

Alert dialog

An alert dialog box is used to display warning like messages to the users. Use the following code to render a simple alert dialog in an application.

razor
dialog-utility-alert.cs
@using Syncfusion.EJ2

<div class="col-lg-8 control-section">
	@Html.EJS().Button("dialogButton").Content("Open Alert Dialog").Render()
</div>
<script>
// To Render dialog utility on button click
document.getElementById('dialogButton').onclick = function () {
// Initialize and render alert dialog
ej.popups.DialogUtility.alert('This is an Alert Dialog!');
};
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        // GET: RTL
        public ActionResult Alert()
        {
            return View();
        }        
    }
}

Render an alert dialog with options

razor
dialog-utility-alert1.cs
@using Syncfusion.EJ2

<div class="col-lg-8 control-section">
	@Html.EJS().Button("dialogButton").Content("Open Alert Dialog").Render()
</div>

<script>
// To Render dialog utility on button click
document.getElementById('dialogButton').onclick = function () {

// Initialize and render alert dialog with options

ej.popups.DialogUtility.alert({
        title: 'Alert Dialog',
        content: "This is an Alert Dialog!",
        okButton: {  text: 'OK', click: okClick },
        showCloseIcon: true,
        closeOnEscape: true
    });
};

function okClick(){
    alert('you clicked OK button');
}
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        // GET: RTL
        public ActionResult Alert()
        {
            return View();
        }        
    }
}

Confirm dialog

A confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button.

razor
dialog-utility-confirm.cs
@using Syncfusion.EJ2

<div class="col-lg-8 control-section">
	@Html.EJS().Button("dialogButton").Content("Open Confirm Dialog").Render()
</div>

<script>

// To Render dialog utility on button click
document.getElementById('dialogButton').onclick = function () {

// Initialize and render confirm dialog
ej.popups.DialogUtility.confirm('This is a Confirmation Dialog!');

};
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        // GET: RTL
        public ActionResult Confirm()
        {
            return View();
        }        
    }
}

Render a confirmation dialog with options

razor
dialog-utility-confirm1.cs
@using Syncfusion.EJ2

<div class="col-lg-8 control-section">
	@Html.EJS().Button("dialogButton").Content("Open Confirm Dialog").Render()
</div>
<script>
// To Render dialog utility on button click
document.getElementById('dialogButton').onclick = function () {

// Initialize and render confirm dialog with custom options
	ej.popups.DialogUtility.confirm({
        title: ' Confirmation Dialog',
        content: "This is a Confirmation Dialog!",
        okButton: {  text: 'OK', click: okClick },
        cancelButton: {  text: 'Cancel', click: cancelClick },
        showCloseIcon: true,
        closeOnEscape: true
    });
	function okClick(){
		alert('you clicked OK button');
	}

	function cancelClick(){
		alert('you clicked Cancel button');
	}
};
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public partial class DialogController : Controller
    {
        // GET: RTL
        public ActionResult Confirm()
        {
            return View();
        }        
    }
}