Switching focus between multiple grids using keyboard

5 posts, 0 answers
  1. Sriram
     Sriram avatar
    11 posts
    Member since:
    Jun 2019

    Posted 30 Jan 2020 Link to this post

    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#

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2130 posts

    Posted 03 Feb 2020 Link to this post

    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.
  3. Sriram
     Sriram avatar
    11 posts
    Member since:
    Jun 2019

    Posted 03 Feb 2020 in reply to Ivan Danchev Link to this post

    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?
  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2130 posts

    Posted 05 Feb 2020 Link to this post

    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.
  5. Sriram
     Sriram avatar
    11 posts
    Member since:
    Jun 2019

    Posted 06 Feb 2020 in reply to Ivan Danchev Link to this post

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