React 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 { DialogTypes } from "devextreme-react/dialog"
Parameters:
message:

String

The dialog's message.

title:

String

The dialog's 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.

confirm(message, title)

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

import { DialogTypes } from "devextreme-react/dialog"
Parameters:
message:

String

The dialog's message.

title:

String

The dialog's 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.

custom(options)

Creates a dialog with custom buttons.

import { DialogTypes } from "devextreme-react/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);
}