Vue 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 { DxDialogTypes } from "devextreme-vue/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 { DxDialogTypes } from "devextreme-vue/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 custom dialog.

import { DxDialogTypes } from "devextreme-vue/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<Object>

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.

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.