Tabindex is going out of kendo window

8 posts, 0 answers
  1. Pushkar
    Pushkar  avatar
    6 posts
    Member since:
    Jan 2015

    Posted 17 Feb 2015 Link to this post

    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  
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Feb 2015 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Pushkar
    Pushkar  avatar
    6 posts
    Member since:
    Jan 2015

    Posted 13 Mar 2015 in reply to Dimo Link to this post

    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,
  5. Pushkar
    Pushkar  avatar
    6 posts
    Member since:
    Jan 2015

    Posted 13 Mar 2015 in reply to Pushkar Link to this post

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

    Thanks,
    Pushkar
  6. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 17 Mar 2015 Link to this post

    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!
     
  7. Pushkar
    Pushkar  avatar
    6 posts
    Member since:
    Jan 2015

    Posted 26 Mar 2015 in reply to Dimo Link to this post

    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.
  8. Pushkar
    Pushkar  avatar
    6 posts
    Member since:
    Jan 2015

    Posted 28 Mar 2015 in reply to Dimo Link to this post

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

    -Pushkar
  9. Pushkar
    Pushkar  avatar
    6 posts
    Member since:
    Jan 2015

    Posted 28 Mar 2015 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready