jQuery/JS Common - Utils - ui - dialog
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 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)
| Name | Type | Description |
|---|---|---|
| buttons |
Buttons to be displayed in the dialog. |
|
| dragEnabled |
Specifies whether the dialog window can be dragged. Defaults to the showTitle value. |
|
| message |
Use 'messageHtml' instead. The dialog's message. Deprecated in favor of the messageHtml field. |
|
| messageHtml |
The dialog's message. Can contain HTML elements. |
|
| showTitle |
Specifies whether to show the title. Defaults to true. |
|
| title |
The dialog's title. |
The custom(options) 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. If the message contains HTML tags, encode it as shown in the following example:
jQuery
$(function() {
var encodedMessage = DevExpress.utils.string.encodeHtml("<b>Dialog with custom buttons</b>");
var myDialog = DevExpress.ui.dialog.custom({
title: "Custom dialog",
messageHtml: encodedMessage,
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';
import { encodeHtml } from 'devextreme/core/utils/string';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
ngAfterViewInit() {
let encodedMessage = encodeHtml("<b>Dialog with custom buttons</b>");
let myDialog = custom({
title: "Custom dialog",
messageHtml: encodedMessage,
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';
import { encodeHtml } from 'devextreme/core/utils/string';
export default {
mounted: function() {
this.$nextTick(function() {
let encodedMessage = encodeHtml("<b>Dialog with custom buttons</b>");
let myDialog = custom({
title: "Custom dialog",
messageHtml: encodedMessage,
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';
import { encodeHtml } from 'devextreme/core/utils/string';
class App extends React.Component {
componentDidMount() {
let encodedMessage = encodeHtml("<b>Dialog with custom buttons</b>");
let myDialog = custom({
title: "Custom dialog",
messageHtml: encodedMessage,
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);