使用箭头键的剑道网格导航答案

【问题标题】：Kendo Grid Navigation using Arrow Keys使用箭头键的剑道网格导航
【发布时间】：2018-03-20 10:24:19
【问题描述】：

我正在尝试使用箭头键在剑道网格中启用导航。我已经看到了箭头键仅用于在可编辑单元格之间导航的示例。我的剑道网格中有 50 多个列，其中 20 多个单元格是可编辑的。我在数据绑定中创建了一个 keydown 事件，该事件仅适用于可编辑单元格。如果我移动到不可编辑的单元格按键事件不起作用。
当前工作逻辑：
向左和向右箭头键仅在可编辑单元格内有效。一旦我们到达不可编辑的单元格，它就无法工作。
所需的工作逻辑
当我们按箭头键时，如果单元格是可编辑的，那么它应该进入编辑模式，如果单元格是不可编辑的，焦点应该保持不变，当我们按左/右箭头键时，光标应该移动到上一个/下一个单元格。

我创建了一个telerik dojo。
更新此 Dojo 在 IE 中按预期工作。但是在chrome中它不起作用。基本上Right arrow key 应该像TAB 键一样工作，Left Arrow key 应该像SHIFT+TAB 一样工作

【问题讨论】：

标签： javascript angularjs kendo-grid

【解决方案1】：

即使不是特别推荐，但在“制表符”时跳过不可编辑的单元格怎么样？

您可以在网格内的表格上绑定 keydown 事件。它可以调用这样的函数：

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])
    }
  } 
};

这当然只解决了寻找下一个所需单元格的部分问题。这个答案可能会在某种程度上引导您朝着正确的方向前进（抱歉没有使用您的 dojo 项目）。

【讨论】：

【解决方案2】：

最后，我们可以通过为单元格提供tabIndex 来解决此问题。基本问题是 TR 和 TD 不会触发 keydown 事件。在为 TD 设置 TABINDEX 之后，我们的按键事件被触发，其余的过程继续进行。我已更新 Telerik Dojo
注意：我们已删除数字输入的微调器，因此按下向上/向下箭头时的值不会改变。

【讨论】：