Kendo Grid Navigation using Arrow Keys

Question

I am trying to enable navigation in Kendo grid using arrow keys. I have seen may examples where arrow keys are used to navigate only between editable cells. There are 50+ columns in my kendo grid in which 20+ cell are editable. I have created a keydown event in databound which works fine only for editable cell. If I move to non editable cell Key press events are not working.
Current Working Logic:
Left and Right arrow keys are working only inside Editable cell. Once we reach non editable cell it's not working.
Desired Working Logic
When we press arrow key if the cell is editable then it should go in edit mode, if the cell is non editable the focus should stay and when we press left / right arrow key it cursor should move to prev/next cell.

I have created a telerik dojo.
UPDATE This Dojo is working as expected in IE. But in chrome it's not working. Basically Right arrow key should work like TAB key and Left Arrow key should work like SHIFT+TAB

gardarvalur gardarvalur · Accepted Answer · 2018-03-24T23:33:37

Even though it is not particularly recommended bu how about skiping over the non editable cells when "tabing"?

You would bind the keydown event on the table within the grid. It could call a function like this:

function onGridKeydown(e){
  if (e.keyCode === kendo.keys.TAB) {
    var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
    var current = grid.current();
    if (!current.hasClass("editable-cell")) {
      var nextCell = current.nextAll(".editable-cell");
      if (!nextCell[0]) {
        //search the next row
        var nextRow = current.parent().next();
        var nextCell = current.parent().next().children(".editable-cell:first"); 
      } 
      grid.current(nextCell);
      grid.editCell(nextCell[0])
    }
  } 
};

This of course only addresses part of the problem about finding the next desired cell. This answer could perhaps lead you somewhat in the right direction (sorry for not using you dojo project).

Kendo Grid Navigation using Arrow Keys

2 Answers