Kendo UI Window Close Event: prevent window close

Question

We are creating a warning message for an app with various forms. In simple pages it's very easy, we just detect changes in form elements and if a user wants to unload the page we show them the warning message.

But... we also have some forms in Kendo Windows, the thing is that we need to show that same confirmation message if a user wants to close the window. This is the script we have now:

$('div:has(div[data-role="window"])').find('a:has(span.k-i-close)').live('click', function (e) {
    if (formHasChanged) {
        alert('pepe');
        return false;
    }
    return true;
});

The problem with that script is that it's not preventing the window from closing, the close event seems to be happening before our alert. This solution may work http://www.kendoui.com/forums/ui/window/new-event-onclosing.aspx, but our windows are created on the fly.

Does anyone have a clue of how to sort this out?

Thanks in advance!

Code were we wanted to insert this kendo thingy workaround:

var formHasChanged = false;
$('form.withWarningMessage').find('input,select,textarea').live('change', function () {
    formHasChanged = true;
    window.onbeforeunload = function () {
        if (formHasChanged) {
            return confirmWarningMessage;
        }
    };
    $('input:submit').live('click', function () {
        formHasChanged = false;
    });
});

Answer 1

It does not matter that you create the Windows on the fly. If you can create them then you can bind such handler. If the code which Alex Gyoshev shared is not fine.

You can bind a handler initially like this:

$("#window").kendoWindow({
    close:function(e){
        if (!confirm("are you sure?"))
        e.preventDefault();
    }
})

Share details about your setup, there should be a way to integrate one of these aproaches into your case.

Answer 2

I ran across where the Kendo Window .Events(events => events.Close("onClose") just was not firing, at all, period, for me. Maybe a Kendo bug. But that said, I got around it using code from that very link you posted:

$("#myWin").data("kendoWindow").bind("close", function(e) {
    if (!confirm("Are you sure?"))
        e.preventDefault();
}); 

You can put that as just a routine that is totally separate from the code you've posted - it doesn't go in there. If you really were dynamically creating new Kendo Windows on the fly, you should give them all unique, individual IDs, and then put the code above into a function, passing in that ID and replacing "#myWin" with that passed-in, dynamically-generated ID, so each window gets the bind.

More on Kendo Windows: http://demos.telerik.com/kendo-ui/window/events