I have a kendo modal window, In which i have a form, so before closing I want to alert the user that there might be changes for that you have not saved. the problem is, kendo modal window seems to have only close event, so if I preventDefault on close event then it is difficult to close, and If I try to add custom 'X' button then it doesn't seem to be seating on the top right corner. any help/direction is appreciated. thanks
Try this:
function onClose(e) {
if (e.userTriggered) {
e.preventDefault();
if (window.confirm('Are you sure?')) {
dialog.data("kendoDialog").close();
}
}
}
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://demos.telerik.com/kendo-ui/dialog/events">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
<span id="show" style="display:none" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md hidden-on-narrow">Click here to open the dialog.</span>
<div id="dialog"></div>
<div class="responsive-message"></div>
<script>
var dialog = $("#dialog");
var show = $("#show");
dialog.kendoDialog({
width: "400px",
title: "Software Update",
closable: true,
modal: false,
content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
actions: [
{ text: 'Close', action: onClose },
{ text: 'OK', primary: true }
],
close: onClose
});
function onClose(e) {
if (e.userTriggered) {
e.preventDefault();
if (window.confirm('Are you sure?')) {
dialog.data("kendoDialog").close();
}
}
show.fadeIn();
}
show.click(function () {
dialog.data("kendoDialog").open();
show.fadeOut();
});
</script>
<style>
#example {
min-height: 370px;
}
#example .box {
margin: 0;
}
#show {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
margin-top: 30px;
}
</style>
</div>
<div class="kd-example-console">
<div class="header">
<span class="title">CONSOLE LOG</span>
<span class="clear kd-text-secondary">Clear log</span>
</div>
<div class="console"></div>
</div>
</body>
</html>