ESC key to close a modal window

13 posts, 1 answers
  1. Joel
    Joel avatar
    78 posts
    Member since:
    Oct 2012

    Posted 23 Dec 2011 Link to this post

    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.
  2.
  3. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 26 Dec 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Joel
    Joel avatar
    78 posts
    Member since:
    Oct 2012

    Posted 27 Dec 2011 Link to this post

    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/
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 27 Dec 2011 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Sergiu
    Sergiu avatar
    6 posts
    Member since:
    Jan 2012

    Posted 30 Mar 2012 Link to this post

    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
  11. Joshua
    Joshua avatar
    84 posts
    Member since:
    May 2012

    Posted 14 Nov 2012 Link to this post

    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);
         }
  13. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 14 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  15. Joshua
    Joshua avatar
    84 posts
    Member since:
    May 2012

    Posted 14 Nov 2012 Link to this post

    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?
  17. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 15 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  19. THOMAS
    THOMAS avatar
    4 posts
    Member since:
    Nov 2012

    Posted 12 Apr 2013 Link to this post

    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 !
  20.
  21. Dan
    Dan avatar
    17 posts
    Member since:
    Mar 2006

    Posted 26 Apr 2013 Link to this post

    $("#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
  23. Joshua
    Joshua avatar
    84 posts
    Member since:
    May 2012

    Posted 26 Apr 2013 Link to this post

    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/
  25. Dan
    Dan avatar
    17 posts
    Member since:
    Mar 2006

    Posted 26 Apr 2013 Link to this post

    Thanks, that takes care of it. 
  26.
Back to Top