This is a migrated thread and some comments may be shown as answers.
Switching focus between multiple grids using keyboard
4 Answers 8 Views
This is a migrated thread and some comments may be shown as answers.
Sriram
Top achievements
Rank 1
Sriram asked on 30 Jan 2020, 09:17 PM

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#

4 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 03 Feb 2020, 04:39 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Sriram
Top achievements
Rank 1
answered on 03 Feb 2020, 06:08 PM
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?
0
Ivan Danchev
Telerik team
answered on 05 Feb 2020, 12:41 PM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Sriram
Top achievements
Rank 1
answered on 06 Feb 2020, 12:52 PM
Thanks Ivan. I will try this approach and get back to you.
Tags
Grid
Asked by
Sriram
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Sriram
Top achievements
Rank 1
Share this question
or