Methods

This section describes the methods exposed by the DevExpress.ui.dialog object.

alert(message, title)

Creates an alert dialog message containing a single "OK" button.

Module: ui/dialog
Export: alert
Parameters:
message:

String

A string value representing the dialog message.

title:

String

A string value representing the dialog title.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved with the dialog result data when the dialog is closed. It is a native Promise or a jQuery.Promise when you use jQuery.

The "alert" dialog is a notification dialog consisting of an alert message and a single button that closes the dialog.

Pay attention to the recommendations given for using modality in the Modal Contexts article. In certain scenarios it may be better to display a modal view instead.

Show Example:
jQuery

confirm(message, title)

Creates a confirm dialog that contains "Yes" and "No" buttons.

Module: ui/dialog
Export: confirm
Parameters:
message:

String

A string value representing the dialog message.

title:

String

A string value representing the dialog title.

Return Value:

Promise<Boolean> (jQuery or native)

A Promise that is resolved with a Boolean value specifying whether the user has clicked the "Yes" or "No" button when the dialog is closed. It is a native Promise or a jQuery.Promise when you use jQuery.

The "confirm" dialog enables you to confirm the operation you are going to complete. The dialog shows a message and suggests two choices: "Yes" and "No". Note that the confirm dialog returns a Deferred object that contains a Boolean value indicating whether a user confirmed or canceled the action. Use the following code to obtain dialog results.

JavaScript
var showConfirm = function () {
    var result = DevExpress.ui.dialog.confirm("Are you sure?", "Confirm changes");
    result.done(function (dialogResult) {
        alert(dialogResult ? "Confirmed" : "Canceled");
    });
};

Pay attention to the recommendations given for using modality in the Modal Contexts article. In certain scenarios it may be better to display a modal view instead.

Show Example:
jQuery

custom(options)

Creates a custom dialog using the options specified by the passed configuration object.

Module: ui/dialog
Export: custom
Parameters:
options:

Object

An object defining options for the dialog.

Object structure:
title:

String

Specifies the dialog's title.

message:

String

Specifies the message displayed by the dialog.

buttons:

Array<Object>

Each item in this array represents options for a button to be displayed in the dialog.

Return Value:

Object

An object representing the required dialog.

To create a custom dialog (with a custom set of buttons), call the DevExpress.ui.dialog.custom(dialogOptions) method. Specify configuration options for the dialog using the fields of the object passed as a parameter.

Unlike the alert and confirm methods, the custom method does not display the dialog. Call the show() method of the created dialog instance to show the dialog.

JavaScript
var showDialog = function () {
    var myDialog = new DevExpress.ui.dialog.custom(dialogOptions);
    myDialog.show();
};

The show() method returns a Promise that is resolved with the dialog result. Use the following code to obtain the dialog result.

JavaScript
var myDialog = DevExpress.ui.dialog.custom(dialogOptions);
myDialog.show().done(function(dialogResult){
    alert(dialogResult);
});
NOTE
The dialogResult parameter passes the object returned by the click event handler of the clicked dialog button.

Use the hide() method to close the dialog before any button is clicked. The following code displays a dialog, and hides it if no button is clicked within 5 seconds.

JavaScript
var showDialog = function () {
    var myDialog = DevExpress.ui.dialog.custom({
        title: "Self hiding dialog",
        message: "This dialog will close after 5 seconds",
        buttons: [{ text: "Close now" }]
    });
    myDialog.show();
    setTimeout(function () { myDialog.hide(); }, 5000);
}

Pay attention to the recommendations given for using modality in the Modal Contexts article. In certain scenarios it may be better to display a modal view instead.

Show Example:
jQuery