Tabindex is going out of kendo window

[Pushkar]

Hi,

1. We are using a kendo-window as a modal popup and applying a tabbing provision inside it by applying tabIndex property.

Consider a scenario a popup window with 4 controls. When a 'tab' navigation reached to a control having a maximum 'tabIndex' number and if we still press a tab in that case 'Tab' control tries to focus a control out of that window (control from parent page) . So we wanted that once we are in window 'tab-index' should not focus out of that window. 

So how can we achieve that?

2. Another help that we would like to have is that we wanted to avoid 'window-drag' on arrow keys but we wanted to have it on mouse-drag. I tried it with 'draggable : false ' but in that case we are not able to drag that window using mouse. So how could I achieve that.

Thanks,
Pushkar  

[Dimo]

Hi Pushkar,

The Kendo UI Window does not prevent focus of elements outside it in modal mode. You can achieve this behavior with some custom Javascript - attach a focus handler to the document and check if the focused element is inside the Window or not. If it isn't, return the focus inside the Window.

The Window's keyboard navigation can be disabled if you remove the tabindex attribute from the Window's element after initialization.

$("#WindowID").removeAttr("tabindex");

You can test the above script in the browser's Javascript console on our online demos:

http://demos.telerik.com/kendo-ui/window/index

Regards,
Dimo
Telerik

[Pushkar]

Hi,
Thanks for your reply. I tried as per your suggestion but  $("#WindowID").removeAttr("tabindex") is working in IE but it is  not working in IE version 11. Window is moving on keyboard navigation. So please guide us on this issue.

Thanks,

[Pushkar]

Sorry, I wanted to say that the solution suggested by you is working in chrome but not in IE version 11.

Thanks,
Pushkar

[Dimo]

Hello Pushkar,

You are right. Please detach the keydown handler as well:

$("#WindowID").off("keydown");

Regards,
Dimo
Telerik

 

 

[Pushkar]

Hi team,
Thanks for your reply. I tried as per your suggestion to stop modal window on keyboard navigation but $("#WindowID").removeAttr("tabindex")is working in chrome but it is  not working in IE version 11. Window is still moving on keyboard navigation. So please guide us on this issue.

[Pushkar]

Thanks Dimo,
Let me try with this solution and I will get back to you in case of any problem.

-Pushkar

[Pushkar]

Thanks Dimo for the support.

Let me try with the solution that you have provided and will get back to you in case of any query.

-Pushkar