Render a Dialog using utility functions

7 Jun 202410 minutes to read

The Dialog control 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 control.
closeOnEscape When set to true, you can close the dialog by pressing ESC key.
cssClass Specifies the CSS class name that can be appended to the dialog.
zIndex Specifies the order of the dialog, that is displayed in front or behind of another component.
open Event which is triggered after the dialog is opened.
close Event which is triggered after the dialog is closed.
animationSettings Specifies the animation settings of the dialog component.

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.

<div style="height:400px;">
    @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>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

}

Render an alert dialog with options

<div style="height:400px;">
    @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,
        animationSettings: { effect: 'Zoom' }
    });
};

    function okClick() {
        alert('You clicked OK button');
    }
</script>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

}

Confirm dialog

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

<div style="height:400px;">
    @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>
public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

    }

Render a confirmation dialog with options

<div style="height:400px;">
    @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,
		animationSettings: { effect: 'Zoom' }
    });
	function okClick(){
		alert('You clicked OK button');
	}

        function cancelClick() {
            alert('You clicked Cancel button');
        }
    };
</script>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

}

Close utility dialog

When rendering an Alert and Confirmation dialog through utility methods, You can close the dialog using the following ways.

  • By pressing the escape key if the closeOnEscape property is enabled.
  • By clicking the close button if the showCloseIcon property is enabled.

You can also manually close the Dialogs by creating an instance to the dialog and call the “hide” method.

Below sample demonstrates the different ways of hiding the utility dialog.

<div style="height:400px;">
    @Html.EJS().Button("dialogButton").Content("Open Confirm Dialog").Render()
</div>
<script>
  var DialogObj;
    // To Render dialog utility on button click
    document.getElementById('dialogButton').onclick = function () {

// Initialize and render confirm dialog with custom options
	DialogObj = 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,
		animationSettings: { effect: 'Zoom' }
    });
	function okClick(){
		alert('You clicked OK button');
	}

    function cancelClick() {
        //Hide the dialog
        DialogObj.hide();
    }
};
</script>
public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }

}