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

Tabindex is going out of kendo window

7 Answers 740 Views
Window
This is a migrated thread and some comments may be shown as answers.
Pushkar
Top achievements
Rank 1
Pushkar asked on 17 Feb 2015, 12:25 PM
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  

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Feb 2015, 09:21 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Pushkar
Top achievements
Rank 1
answered on 13 Mar 2015, 01:16 PM
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,
0
Pushkar
Top achievements
Rank 1
answered on 13 Mar 2015, 01:23 PM
Sorry, I wanted to say that the solution suggested by you is working in chrome but not in IE version 11.

Thanks,
Pushkar
0
Dimo
Telerik team
answered on 17 Mar 2015, 08:57 AM
Hello Pushkar,

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

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


Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Pushkar
Top achievements
Rank 1
answered on 26 Mar 2015, 06:25 AM
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.
0
Pushkar
Top achievements
Rank 1
answered on 28 Mar 2015, 09:47 AM
Thanks Dimo,
Let me try with this solution and I will get back to you in case of any problem.

-Pushkar
0
Pushkar
Top achievements
Rank 1
answered on 28 Mar 2015, 09:51 AM
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
Tags
Window
Asked by
Pushkar
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Pushkar
Top achievements
Rank 1
Share this question
or