This is a migrated thread and some comments may be shown as answers.

Possible to close window when it loses focus?

9 Answers 1497 Views
Window
This is a migrated thread and some comments may be shown as answers.
David A.
Top achievements
Rank 1
David A. asked on 08 Apr 2013, 12:49 AM
Hi,

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

Thanks,
David A.

9 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 08 Apr 2013, 11:28 AM
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!
0
Joe
Top achievements
Rank 1
answered on 10 May 2013, 09:46 AM
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?
0
Dimiter Madjarov
Telerik team
answered on 13 May 2013, 07:52 AM
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!
0
Saquib
Top achievements
Rank 1
answered on 18 May 2015, 02:05 PM

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.

 

0
Dimiter Madjarov
Telerik team
answered on 19 May 2015, 02:19 PM

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!
 
0
Saquib
Top achievements
Rank 1
answered on 20 May 2015, 03:44 PM

Hello Dimiter,

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

 Thank you!

0
Dimiter Madjarov
Telerik team
answered on 21 May 2015, 11:40 AM

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!
 
0
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 28 Dec 2020, 09:11 AM

Hi,
the Telerik support informed me:

"the blur event does not fire and this behavior has been introduced in R3 2020 SP1."

This doyo only works up to Library Kendo UI 2020 R3.

The workaround for 2020 R3 SP1 and above:

var isActive = false;
 
$(document).ready(function () {
  console.log("ready");
  InitMapWindow();
 
  $(document).on('touchstart click', function(e){
    console.log("click/touchstart");
 
    if (isActive) { 
      if ($(document.activeElement).closest(".k-window").length == 0) {
            $("#mapwindow").data("kendoWindow").close();
        }
    }
  });
});

dojo: https://dojo.telerik.com/anedEfOs

Regards,

Peter

0
Martin
Telerik team
answered on 30 Dec 2020, 07:21 AM

Hello, Peter,

Thank you for sharing the workaround with the community, in case someone else has the same requirement.

Feel free to contact us whenever you have further questions. Happy Holidays!

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Window
Asked by
David A.
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Joe
Top achievements
Rank 1
Saquib
Top achievements
Rank 1
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
Martin
Telerik team
Share this question
or