Customize the Predefined Dialogs
Environment
| Product | Progress® Kendo UI® Dialog for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I open alert, prompt, and confirmation Kendo UI Dialogs?
Solution
The easiest way to achieve this behavior is to use the dedicated methods which are exposed through the Kendo UI API. However, this configuration enables you to change only the message without providing you the control over the Dialog itself—for example, over the title.
The following example demonstrates a possible way to implement your own methods that open customized instances of the alert, prompt, and confirmation Dialogs. This is achieved by using the kendo.ui.Alert, kendo.ui.Prompt, and kendo.ui.Confirm configuration options.
<button id="alertBtn" >myalert</button>
<button id="confirmBtn">myconfirm</button>
<button id="promptBtn">myprompt</button>
<script>
$("#alertBtn").kendoButton({
click: function () {
window.myalert("This is a Kendo UI Alert message!");
}
});
$("#confirmBtn").kendoButton({
click: function () {
window.myconfirm("Are you sure that you want to proceed?").then(function () {
window.myalert("Operation done!");
}, function () {
window.myalert("You chose to Cancel action.");
});
}
});
$("#promptBtn").kendoButton({
click:function () {
window.myprompt("Please, enter a arbitrary value:", "any value").then(function (data) {
window.myalert(kendo.format("The value that you entered is '{0}'", data));
}, function () {
window.myalert("Cancel entering value.");
})
}
});
function myalert(content){
$("<div></div>").kendoAlert({
title: "My Title",
content: content,
messages:{
okText: "Ok"
}
}).data("kendoAlert").open();
}
function myconfirm(content){
return $("<div></div>").kendoConfirm({
title: "My Title",
content: content
}).data("kendoConfirm").open().result;
}
function myprompt(content, defaultValue){
return $("<div></div>").kendoPrompt({
title: "My Title",
value: defaultValue,
content: content
}).data("kendoPrompt").open().result;
}
</script>