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.

Module: ui/dialog
Export: alert
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.

Module: ui/dialog
Export: confirm
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
App.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
App.js
import React from 'react';
import { confirm } from 'devextreme/ui/dialog';

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

custom(options)

Creates a dialog with custom buttons.

Module: ui/dialog
Export: custom
Parameters:
options:

Object

The dialog's options.

Object structure:
title:

String

The dialog's title.

messageHtml:

String

The dialog's message. Can contain HTML elements.

Buttons to be displayed in the dialog.

showTitle:

Boolean

Specifies whether to show the title.

message:

String

Use 'messageHtml' instead.

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

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
App.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
App.js
import React from 'react';
import { custom } from 'devextreme/ui/dialog';

class App 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 App;

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);