dialog 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.

Parameters:
message: String
A string value representing the dialog message.
title: String
A string value representing the dialog title.
Return Value: Object
A JQuery Deferred object whose resolve field contains the dialog result data.

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

Show Example:
jQuery
<div data-bind="dxButton: {text: 'Show alert', clickAction: showAlert}"></div>
showAlert = function () {
  DevExpress.ui.dialog.alert('Alert message', 'Alert title');
};
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}

confirm(message, title)

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

Parameters:
message: String
A string value representing the dialog message.
title: String
A string value representing the dialog title.
Return Value: Object
A JQuery Deferred object whose resolve field contains a Boolean value specifying whether the user has clicked the "Yes" or "No" button.

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");
    });
};
Show Example:
jQuery
<div data-bind="dxButton: {text: 'Show Confirm dialog', clickAction: showConfirm}"></div>
showConfirm = function () {
  var result = DevExpress.ui.dialog.confirm("Are you sure?", "Confirm changes");
  result.done(function (dialogResult) {
    if (dialogResult)
      DevExpress.ui.notify("Confirmed", "success", 2000);
    else
      DevExpress.ui.notify("Canceled", "error", 2000);
  });
};
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}

custom(options)

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

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
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 the promise of the jQuery Deferred object, which passes 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);
}
Show Example:
jQuery
<div data-bind="dxButton: {text: 'Show custom dialog', clickAction: showCustomDialog}"></div>
showCustomDialog = function () {
  var replace = function () {
    return "Replace";
  };
  var rename = function () {
    return "Rename";
  };
  var cancel = function () {
    return "Cancel";
  };
  var customDialog = DevExpress.ui.dialog.custom({
    title: "Item exists",
    message: "The item already exists",
        buttons: [
            { text: "Replace", clickAction: replace },
            { text: "Rename", clickAction: rename },
            { text: "Cancel", clickAction: cancel } 
        ]
    });
    customDialog.show().done(function (dialogResult) {
        DevExpress.ui.notify(dialogResult, "info", 1000);
    });
};
body {
    text-align: center;
}
.button{
    margin-top: 25px;
}