ESC key to close a modal window

[Joel]

Is there anything there an option available on the control?

My other option would be tap into the keypress event and check for the ESC keycode. I've began to really like the keyboard navigation features of the grid and was wondering if there is a KendoUI API exposing events for all the keys in the kendo.keys object.

Thanks in advance.

[Kamen Bundev]

Hello Joel,

Unfortunately there's no such feature in the Kendo UI Window. You can bind to the keypress event and use the kendo.keys to check for it, something like this: 

$(document).bind("keypress", function (e) {
    if (e.keyCode == kendo.keys.ESC) {

        var visibleWindow = $(".k-window:visible > .k-window-content");

        if (visibleWindow.length)

            visibleWindow.data("kendoWindow").close();

    }

});

Greetings,
Kamen Bundev
the Telerik team

[Joel]

Thanks ... that helps.

Just a heads up - keypress doesn't work in Chrome (Webkit browsers) with the ESC key. keyup/keydown is the recommended way to go. More here: http://ejohn.org/blog/keypress-in-safari-31/

[Kamen Bundev]

Hi,

Ah, sorry, forgot about this madness :) I usually refer to this article, it covers most browsers and their quirks.

Regards,
Kamen Bundev
the Telerik team

[Sergiu]

There is a piece of solution for Firefox and IE. Check this out :
http://kendo-ui.blogspot.com/2012/03/how-to-close-kendoui-window-on-esc-key.html

[Joshua]

It looks like the latest version of kendo has the feature that escape will close a window with an escape key press. However I don't want this functionality in certain windows. Is there a way to short circuit this?

     

_keydown: function(e) {

     var that = this,

         options = that.options,

         keys = kendo.keys,

         keyCode = e.keyCode,

         wrapper = that.wrapper,

         offset, handled,

         distance = 10,

         newWidth, newHeight;

 

     if (e.target != e.currentTarget) {

         return;

     }

 

     if (keyCode == keys.ESC) {

         that._close(true);

     }

[Alex Gyoshev]

Hello Joshua,

There are several ways of interacting with this accessibility feature:

• If you are handling the event with a custom action, you should indicate that you did so by calling e.preventDefault() or e.stopPropagation().
• If you don't want the window to close under certain circumstances, you can cancel the close event conditionally.

Either way, you should allow the window to be closed with the keyboard if it can be closed with the mouse.

Regards,

Alex Gyoshev
the Telerik team

[Joshua]

I have all form actions on the window removed. I have two buttons on the form. Once redirects to one page and the other redirects to a second.

The problem that I have is that if the user presses escape then it just closes the window. This was not the case in prior releases.

I never want escape to close this particular window. I need the user to press one of the two buttons. How would I go about doing this?

[Alex Gyoshev]

Hello Joshua,

If you don't want the user to be able to close the window, you can prevent the close event:

$("<div />").kendoWIndow({
    close: function(e) {
         e.preventDefault();
    }
});

It makes sense to remove the ESC key handler when the close action is not available. The next internal build will address this.

Greetings,
Alex Gyoshev
the Telerik team

[THOMAS]

Hello
I've just tried with the new build and it seems that when the close action is not defined it continues closing the window with the escape key.
Am I doing something wrong ?

@(Html.Kendo().Window().Draggable().HtmlAttributes(new { @class = "cptTiersFenetre" })
            .Modal(true).Name(@Model.idView + "cptTiersFenetre").Resizable(r => r.Enabled(true))
            .Title("Compte tiers - Paramètres").Visible(false)
            .Actions(a=>a.Custom("Fermer"))
    )

Edit :
Woops... It seems that I have not done the update correctly (certainly missing to update some js files) it now works as expected : when the action "close" is not defined then the ESC key will not close the window.
Thanks for this update !

[Dan]

$("#toastWindow").kendoWindow(
    {
        width: "400px",
        modal: true,
        resizable: false,
        title: false,
        close: null
    }).data("kendoWindow");

This isn't working to disable the escape button dismissing the window.  What am I doing wrong?


Forgot to mention, I'm on 2013.1.319

[Joshua]

You should not pass null in for your action.

var win = $(winContent).kendoWindow({

    actions:{},

    title:'hello',

    deactivate: function () {

        //lets make sure we get rid of the whole thing               

        this.element.closest(".k-window").remove();

    }

}).getKendoWindow().center().open();

fiddle here:
http://jsfiddle.net/grippstick/emsKk/36/

[Dan]

Thanks, that takes care of it.