Grid keyboard/accesability navigation inside window

3 posts, 0 answers
  1. Emanuel
    Emanuel avatar
    13 posts
    Member since:
    Dec 2015

    Posted 20 Jun 2016 Link to this post

    Hello we are using kwindow service as described here:

    We experience the followoing issues, regarding keyboard accessibility:

    1.We have grid inside window, and one of the columns of that grid is a dropdown. to access this dropdown, we press Enter and Alt + arrow up. This behavior is different (and even incorrect), from outside modal, where enter and arrow down is enough. We want a way to achieve same behavior inside modal.

    2. we want to prevent access to underlying screen when the modal is open.

    3. I noticed that sometimes when editing cells, and the user presses shift + Tab, there focusing cell jumps elsewhere, I even could see this in a demo (try to check /uncheck  a checkbox with keyboard only)


    Is there a way to ensure the focus goes to previous cell? (the user moves between cells with tabs/shit+tabs.


    Thank you in advanve

  2. Emanuel
    Emanuel avatar
    13 posts
    Member since:
    Dec 2015

    Posted 21 Jun 2016 Link to this post

    Hi, I hope you read the question, please give a feedback. Thanks in Advance.
  3. Dimo
    Dimo avatar
    8472 posts

    Posted 22 Jun 2016 Link to this post

    Hi Emanuel,

    Here are some tips on your questions.

    1. We are not familiar with such a behavior. Can you provide a simple test page for inspection?

    2. The Kendo UI Window does not prevent keyboard access via tabbing to the page content behind the modal overlay. It is possible to achieve the desired behavior by using a focus handler for the page <body>, check which is the focused element and return focus inside the Window if needed.

    3. The issue is caused by using a custom editor in display mode. It is possible to restore the focused (current) cell by using the dataBinding and dataBound events. Here is how:

    var cellIndex = null;
    var rowIndex = null;
      dataBinding: function(e) {
        var current = e.sender.current() || [];
        if (current[0]) {
          cellIndex = current.index();
          rowIndex = current.parent().index();
      dataBound: function(e) {
        if (!isNaN(cellIndex)) {

    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top