React Common - utils - ui - dialog - Methods

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

alert(messageHtml, title)

Displays an alert dialog with a message and OK button.

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

String

The dialog's message. Can contain HTML elements.

title:

String

The dialog's title.

Return Value:

Promise<void> (jQuery or native)

A Promise that is resolved after a user clicks the button. It is a native Promise or a jQuery.Promise when you use jQuery.

confirm(messageHtml, title)

Creates a confirmation dialog with a message and Yes and No buttons.

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

String

The dialog's message. Can contain HTML elements.

title:

String

The dialog's title.

Return Value:

Promise<Boolean> (jQuery or native)

A Promise that is resolved with a Boolean value indicating whether a user has clicked Yes or No. It is a native Promise or a jQuery.Promise when you use jQuery.

jQuery
JavaScript
$(function() {
    var result = DevExpress.ui.dialog.confirm("<i>Are you sure?</i>", "Confirm changes");
    result.done(function(dialogResult) {
        alert(dialogResult ? "Confirmed" : "Canceled");
    });
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { confirm } from 'devextreme/ui/dialog';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit{
    ngAfterViewInit() { 
        let result = confirm("<i>Are you sure?</i>", "Confirm changes");
        result.then((dialogResult) => {
            alert(dialogResult ? "Confirmed" : "Canceled");
        });
    }
}
Vue
DxComponent.vue
<template>
</template>
<script>
import { confirm } from 'devextreme/ui/dialog';

export default {
    mounted: function() {
        this.$nextTick(function() {
            let result = confirm("<i>Are you sure?</i>", "Confirm changes");
            result.then((dialogResult) => {
                alert(dialogResult ? "Confirmed" : "Canceled");
            });
        })
    }
}
</script>
React
DxComponent.js
import React from 'react';
import { confirm } from 'devextreme/ui/dialog';

class DxComponent extends React.Component {
    componentDidMount() { 
        let result = confirm("<i>Are you sure?</i>", "Confirm changes");
        result.then((dialogResult) => {
            alert(dialogResult ? "Confirmed" : "Canceled");
        });
    }
}
export default DxComponent;

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

String

The dialog's message. Can contain HTML elements.
buttons

Array<Button Configuration>

Buttons to be displayed in the dialog.
showTitle

Boolean

Specifies whether to show the title. Defaults to true.
message

String

Use 'messageHtml' instead.

The dialog's message. Deprecated in favor of the messageHtml field.
dragEnabled

Boolean

Specifies whether the dialog window can be dragged. Defaults to the showTitle value.
Ensure the showTitle field is not explicitly set to false because a user can drag the dialog only by its title.
Return Value:

Object

An object that represents the dialog.

This method only creates a dialog. To display it, call the dialog instance's show() method. This method returns a Promise that is resolved with the dialog result. The result contains anything you return from the clicked button's onClick function. In the following code, it is the clicked button's text:

jQuery
JavaScript
$(function() {
    var myDialog = DevExpress.ui.dialog.custom({
        title: "Custom dialog",
        messageHtml: "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);
    });
})
Angular
app.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { custom } from 'devextreme/ui/dialog';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit{
    ngAfterViewInit() { 
        let myDialog = custom({
            title: "Custom dialog",
            messageHtml: "Dialog with custom buttons",
            buttons: [{
                text: "button 1",
                onClick: (e) => {
                    return { buttonText: e.component.option("text") }
                }
            }, 
            // ...
            ]
        });
        myDialog.show().then((dialogResult) => {
            console.log(dialogResult.buttonText);
        });
    }
}
Vue
DxComponent.vue
<template>
</template>
<script>
import { custom } from 'devextreme/ui/dialog';

export default {
    mounted: function() {
        this.$nextTick(function() {
            let myDialog = custom({
                title: "Custom dialog",
                messageHtml: "Dialog with custom buttons",
                buttons: [{
                    text: "button 1",
                    onClick: (e) => {
                        return { buttonText: e.component.option("text") }
                    }
                }, 
                // ...
                ]
            });
            myDialog.show().then((dialogResult) => {
                console.log(dialogResult.buttonText);
            });
        })
    }
}
</script>
React
DxComponent.js
import React from 'react';
import { custom } from 'devextreme/ui/dialog';

class DxComponent extends React.Component {
    componentDidMount() { 
        let myDialog = custom({
            title: "Custom dialog",
            messageHtml: "Dialog with custom buttons",
            buttons: [{
                text: "button 1",
                onClick: (e) => {
                    return { buttonText: e.component.option("text") }
                }
            }, 
            // ...
            ]
        });
        myDialog.show().then((dialogResult) => {
            console.log(dialogResult.buttonText);
        });
    }
}
export default DxComponent;

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

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