I need to open multiple kendo windows with iframe. However, when I call the close method, I find that KendoUI closes all other open windows as well (even if close it by calling the particular window instance).
I have put in two generic methods I m using on the pages.
Page 1: on click of button open page2 by calling customDialog. Page 2: on load, call customAlert("testing 123").....
on clicking ok.... it closes both the windows.
Is there a way I can prevent this behavior?
Not sure what is the problem.. but this seems to be happening only on click of OK button... if I click on X button or Esc.. it seems to work fine!
Thanks in advance.
//custom Dialog used to open page views inside an iframe
//pageUrl: relativeUrl as in /myPage/index
//window title: Text that needs to be displayed on top of Dialog. default is "Information"
//$statusTracker : an element on parent page that can be used to pass outcome. sets it to '' when closed using the dialog X button.
//onCloseFunc: Parameterless callback function invoked on close
//onOpenFunc: Parameterless callback function invoked on opening dialog
function customDialog(pageUrl, windowTitle, $statusTracker, onCloseFunc, onOpenFunc) {
var instanceId = new Date().getTime();
if ($statusTracker != null) {
$statusTracker.val('');//reset associated status
$statusTracker.data('win-id', 'dialog' + instanceId);
}
$('body').append('<div id="dialog' + instanceId + '" />');
var $window = $("#dialog"+ instanceId),
undo = $("#undoDialog" + instanceId)
.bind("click", function () {
$window.data("kendoWindow").open();
undo.hide();
});
var onClose = function () {
undo.show();
setTimeout(function () {
if (typeof onCloseFunc == "function") {
onCloseFunc();
}
}, 500);
};
var onOpen = function () {
$window.css('overflow', 'hidden');
if (typeof onOpenFunc == "function") {
setTimeout(function () { onOpenFunc(); }, 500);
}
};
$window.kendoWindow({
iframe: true,
draggable: false,
modal: true,
resizable: false,
width: "80%",
height: "80%",
position: {
top: "10%",
left: "10%"
},
deactivate: function () {
this.destroy();
},
autoFocus: true,
actions: [
"Maximize",
"Close"
],
title: windowTitle || 'Window',
content: pageUrl,
open: onOpen,
close: onClose
});
}
//shows an alert dialog
function customAlert(message, okFunction) {
var instanceId = new Date().getTime();
$('body').append('<div id="cc2' + instanceId + '"><table style="width:100%;height:100%"><tr><td colspan="3" style="padding-bottom:10px"><span class="alert-content">' + (message || '') + '</span></td></tr>' + '<tr><td style="width"40%"></td><td style="width:20%"><a href="#" class="btn-ok">Ok</a></td><td></td></tr></table></div>');
var $window = $("#cc2" + instanceId),
undo = $("#undo2" + instanceId)
.bind("click", function () {
$window.data("kendoWindow").open();
undo.hide();
});
var onClose = function () {
undo.show();
if (typeof (okFunction) == 'function') {
setTimeout(okFunction, 50);
}
}
var onOpen = function () {
$window.find('.btn-ok').bind('click', function () {
$window.data("kendoWindow").close();
});
$window.css('overflow', 'hidden');
$window.find('.alert-content').html(message || '');
}
$window.kendoWindow({
modal: true,
deactivate: function () {
this.destroy();
},
autoFocus: true,
actions: [
"Close"
],
title: 'Alert',
close: onClose,
open: onOpen
});
}