Possible to close window when it loses focus?

8 posts, 1 answers
  1. David A.
    David A. avatar
    126 posts
    Member since:
    Aug 2008

    Posted 07 Apr 2013 Link to this post

    Hi,

    Is it possible to close the window when the user clicks somewhere outside the window (which is not modal)?

    Thanks,
    David A.
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 08 Apr 2013 Link to this post

    Hello David,


    To achieve this you could bind to the blur event of the window div element (since it has a tabindex specified) and close the window in the event handler. A sample implementation would be:

    E.g.
    $("#window").blur(function(){
        if ($(document.activeElement).closest(".k-window").length == 0) {
            $("#window").data("kendoWindow").close();
        }
    });

     

    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Joe
    Joe avatar
    4 posts
    Member since:
    Mar 2013

    Posted 10 May 2013 Link to this post

    This solution appears to work in most cases. However, I have a Window that has a form and some input elements. When I put focus on any of these input elements the Window loses focus and the blur event is fired, causing the Window to close. Any suggestion?
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 13 May 2013 Link to this post

    Hello Joe,


    You are right, I managed to reproduce this behavior on my side too. The reason is that at the time the event is fired, the activeElement is not the input field yet and the check in the if statement is failing. As a solution, you could wrap it in a timeout.

    E.g.
    $("#window").blur(function () {
        setTimeout(function () {
            if ($(document.activeElement).closest(".k-window").length == 0) {
                $("#window").data("kendoWindow").close();
            }
        });
    });

    I hope this solution will work in the current scenario. Wish you a great day!

     

    Kind regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Saquib
    Saquib avatar
    15 posts
    Member since:
    Mar 2015

    Posted 18 May 2015 in reply to Dimiter Madjarov Link to this post

    Hello Dimiter,

    I have an input field in the kendo window. It does not close the window when I click outside of the window with the current focus on the input field. Other scenarios, it works fine.

     

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 19 May 2015 Link to this post

    Hello Saquib,

    The reason for this behavior is that the blur event of the window wrapper is not fired in this case. I modified the example to match the current requirements.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Saquib
    Saquib avatar
    15 posts
    Member since:
    Mar 2015

    Posted 20 May 2015 in reply to Dimiter Madjarov Link to this post

    Hello Dimiter,

     Looks like, this example is in Kendo UI window. Can you give me an example in Kendo MVC window.

     Thank you!

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 21 May 2015 Link to this post

    Hello Saquib,

    The approach in the MVC Window is basically the same:
    - Add the blur handler for the window and the closeWindow function.
    E.g.

    $("#window").blur(function(e){
        if($(e.relatedTarget).hasClass("myinput") == false) {
             closeWindow(e);
        }
    });
     
    function closeWindow(e) {
            if ($(e.relatedTarget).closest(".k-window").length == 0) {
              $("#window").data("kendoWindow").close();
        }
    }

    - Bind to the activate event and add the handler for it.
    E.g.
    .Events(e => e.Activate("activate"))
    function activate(e) {
      this.wrapper.find(".myinput").blur(function(e){
        closeWindow(e);
      });
    }

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready