Possible to close window when it loses focus?

[David A.]

Hi,

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

Thanks,
David A.

[Dimiter Madjarov]

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

[Joe]

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?

[Dimiter Madjarov]

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

[Saquib]

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.

 

[Dimiter Madjarov]

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

 

 

[Saquib]

Hello Dimiter,

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

 Thank you!

[Dimiter Madjarov]

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

 

 

[Peter]

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

[Martin]

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