Switching focus between multiple grids using keyboard

[Sriram]

Hi,

I have multiple kendo grids on my page and I would like to switch focus between the grids using keyboard.  I tried to follow the below example but it does not work for multiple grids.

https://demos.telerik.com/aspnet-mvc/grid/keyboard-navigation

Below is the current configuration which I am using.
Version: 2019.2.619.545 (Kendo Web Extensions for ASP.NET MVC)
MVC version: 5.0
IDE: Visual Studio 2015
Browser : Chrome  76.0.3809.100, IE 11.0
.Net Framework: 4.6.2
Programming Language: C#

[Ivan Danchev]

Hi Sriram,

To focus the Grid we are using the body's keydown event handler:

$(document.body).keydown(function(e) {
        if (e.altKey && e.keyCode == 87) {
            $("#grid").data("kendoGrid").table.focus();
        }
    });

So on pressing Alt + W we get a reference to the Grid and call its table.focus() method.

When you have 2 Grids on the page you can use different key combinations to focus one or the other. See this dojo example (the approach is identical in MVC): https://dojo.telerik.com/AvUZEtav

We have 2 Grids with ids "grid1" and "grid2" respectively. Grid1 is focused by pressing Alt + W, and Grid2 is focused by pressing Alt + G. The modification to the keydown handler is the following:

$(document.body).keydown(function(e) {
  if (e.altKey && e.keyCode == 87) {
    $("#grid1").data("kendoGrid").table.focus();
  }
  else if(e.altKey && e.keyCode == 71) {
    $("#grid2").data("kendoGrid").table.focus();
  }
});

Regards,
Ivan Danchev
Progress Telerik

[Sriram]

Thanks Ivan. That works and I need to add this code in every page. But in case I have a common code focusing the grids how can this be achieved?

[Ivan Danchev]

Sriram,

This is achievable through using the proper jQuery selectors and methods to identify the currently focused Grid and the next Grid that has to be focused.

Here's the example: https://dojo.telerik.com/emaZaWoC

And the modified keydown handler:

$(document.body).keydown(function(e) {
  if (e.altKey && e.keyCode == 87) {
    if($(':focus').length && $($(':focus')[0]).hasClass("k-selectable")) {
      var currentGrid = $(':focus').closest(".k-grid");
     	$("#example>.k-grid").not(currentGrid).first().data("kendoGrid").table.focus();
    }
    else {
    	$("#grid1").data("kendoGrid").table.focus();
    }
  }
});

In this case only the Alt + W key combination is used. When the first Grid is focused pressing Alt + W again will focus the second Grid.

Note that in the line that focuses the next Grid the container of the Grids <div id="example"> is used as a selector. This is needed, in order to find the next Grid:

$("#example>.k-grid").not(currentGrid).first().data("kendoGrid").table.focus();

If in your scenario the Grids are not nested in a common container, you might have to use a different selector, to get an element that is higher in the DOM elements hierarchy, an element that is parent of both Grids, or even the body element.

Additionally, if there are more Grids in different places on the page, you will have to implement some custom logic that determines the order of focusing each one of them.

Regards,
Ivan Danchev
Progress Telerik

[Sriram]

Thanks Ivan. I will try this approach and get back to you.