jQuery/JS Common - utils - ui - dialog - Methods
alert(messageHtml, title)
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)
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
$(function() {
var result = DevExpress.ui.dialog.confirm("<i>Are you sure?</i>", "Confirm changes");
result.done(function(dialogResult) {
alert(dialogResult ? "Confirmed" : "Canceled");
});
})Angular
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
<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
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)
| Name | Type | Description |
|---|---|---|
| title |
The dialog's title. |
|
| messageHtml |
The dialog's message. Can contain HTML elements. |
|
| buttons |
Buttons to be displayed in the dialog. |
|
| showTitle |
Specifies whether to show the title. Defaults to true. |
|
| message |
Use 'messageHtml' instead. The dialog's message. Deprecated in favor of the messageHtml field. |
|
| dragEnabled |
Specifies whether the dialog window can be dragged. Defaults to the showTitle value. |
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
$(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
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
<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
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);