剑道网格 - 如何通过UP / DOWN键盘键使整行选择导航？

Question

在鼠标单击所选行后，我有以下带有彩色行的网格。

如果用户在键盘上使用UP和DOWN行，我希望添加相同的功能，其中按键盘实际选择的行将被传递，如下面的更改功能所示。

请问如何使用剑道？

change: function (e) {
              var selectedRows = this.select();
              var selectedDataItems = [];
              for (var i = 0; i < selectedRows.length; i++) {
                  var dataItem = this.dataItem(selectedRows[i]);
                  selectedDataItems.push(dataItem);
              }
              console.log(selectedDataItems);
              $scope.setDetailToScope(selectedDataItems, "row_select");
          },

修改

我也试过这个功能：

$(function () {
    var arrows = [38, 40];
    var grid = $("#grid").data("kendoGrid");
    grid.table.on("keydown", function (e) {
        if (arrows.indexOf(e.keyCode) >= 0) {
            setTimeout(function () {
                grid.select($("#rowSelection_active_cell").closest("tr"));
            });
        }
    })
});

可以识别向上/向下按钮，但我无法获得下一个选定的行并将其着色。

Answer 1

您只需启用Kendo navigatable功能：

$("#grid").kendoGrid({
    ...
    selectable: "row",
    navigatable: true,
    ...
});

与http://demos.telerik.com/kendo-ui/grid/keyboard-navigation

类似

编辑： 要在没有重影突出显示的情况下导航，您应该手动处理：

  var data = $("#grid").data('kendoGrid');
  var arrows = [38, 40];
  data.table.on("keydown", function (e) {
    if (arrows.indexOf(e.keyCode) >= 0) {
        setTimeout(function () {
            data.select($("#grid_active_cell").closest("tr"));
        },1);
    }
  }

https://jsfiddle.net/bzm5dwvo/

Answer 2

您必须设置网格float和Selectable设置GridSelectionMode 喜欢：

Single

你可以在网格事件中使用.Selectable(s=> s.Mode(GridSelectionMode.Single)) envent：

Navigate

并在js函数中：

.Events(evt=> evt.Navigate("navigate"));