Kendo Ui closes all open dialogs

934 views Asked by At

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
});
}
0

There are 0 answers