All docs
V18.1
25.2
The page you are viewing does not exist in version 25.2.
25.1
The page you are viewing does not exist in version 25.1.
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

jQuery/JS Common - utils - ui - 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.

import { alert } from "devextreme/ui/dialog"
Parameters:
message:

String

The dialog's message.

title:

String

The dialog's title.

Return Value:

PromiseLike object (jQuery, native, etc)

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.

confirm(message, title)

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

import { confirm } from "devextreme/ui/dialog"
Parameters:
message:

String

The dialog's message.

title:

String

The dialog's title.

Return Value:

PromiseLike object (jQuery, native, etc)

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.

custom(options)

Creates a dialog with custom buttons.

import { custom } from "devextreme/ui/dialog"
Parameters:
options:

Object

The dialog's options.

Object structure:
Name Type Description
title

String

The dialog's title.

message

String

The dialog's message.

buttons

Array<Button Configuration>

Options for buttons to be displayed in the dialog.

showTitle

Boolean

Specifies whether to show the title.

Return Value:

Object

An object representing the dialog.

The custom method only creates a dialog. To show it, call the created dialog instance's show() method. The method returns a Promise that is resolved with the dialog result. This result is the object returned in the clicked dialog button's onClick function.

JavaScript
function() {
    var myDialog = DevExpress.ui.dialog.custom({
        title: "Custom dialog",
        message: "Dialog with custom buttons",
        buttons: [{
            text: "button 1",
            onClick: function (e) {
                return { buttonText: e.component.option("text"), /* ... */ }
            }
        }, 
        // ...
        ]
    });
    myDialog.show().done(function(dialogResult){
        console.log(dialogResult.buttonText); // Outputs the clicked button's text
    });
}

Use the hide() method to close the dialog before any button is clicked. In the following code, the dialog is hidden after 5 seconds if a user does not click a button:

JavaScript
function () {
    // ...
    setTimeout(function () { myDialog.hide(); }, 5000);
}