Create Confirmation Dialogs by Using Promises
Environment
| Product | Progress® Kendo UI® Window for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I create a confirmation dialog in a Kendo UI Window by using Promises for deferred execution?
Solution
The example below demonstrates how to achieve the desired scenario.
<script id="confirmationTemplate" type="text/x-kendo-template">
<div class="popupMessage"></div>
</br>
<hr/>
<div class="dialog_buttons">
<input type="button" class="confirm_yes" value="Yes" style="width: 70px" />
<input type="button" class="confirm_no" value="No" style="width: 70px" />
</div>
</script>
<script>
function showConfirmationWindow(message) {
return showWindow('#confirmationTemplate', message)
};
function showWindow(template, message) {
var dfd = new jQuery.Deferred();
var result = false;
$("<div id='popupWindow'></div>")
.appendTo("body")
.kendoWindow({
width: "200px",
modal: true,
title: "",
modal: true,
visible: false,
close: function (e) {
this.destroy();
dfd.resolve(result);
}
}).data('kendoWindow').content($(template).html()).center().open();
$(".confirm_yes").kendoButton();
$(".confirm_no").kendoButton();
$('.popupMessage').html(message);
$('#popupWindow .confirm_yes').val('OK');
$('#popupWindow .confirm_no').val('Cancel');
$('#popupWindow .confirm_no').click(function () {
$('#popupWindow').data('kendoWindow').close();
});
$('#popupWindow .confirm_yes').click(function () {
result = true;
$('#popupWindow').data('kendoWindow').close();
});
return dfd.promise();
};
$.when(showConfirmationWindow('Are you sure?')).then(function(confirmed){
if(confirmed){
alert('OK');
}
else{
alert('Cancel');
}
});
</script>