Kendo Grid，如何通过按Tab键在下一个可编辑列上启用编辑？

Question

我有一个可编辑的网格，单击选定的单元格后即可编辑。

我想问一下：

是否可以启用在按下选项卡后将编辑模式移至同一行的下一个可编辑字段的事件？

谢谢你的帮助。

Answer 1

在Grid初始化中设置navigatable为true。该文件说：

$(document).ready(function () {
  var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
      dataSource = new kendo.data.DataSource({
        transport: {
          read:  {
            url: crudServiceBaseUrl + "/Products",
            dataType: "jsonp"
          },
          update: {
            url: crudServiceBaseUrl + "/Products/Update",
            dataType: "jsonp"
          },
          parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
              return {models: kendo.stringify(options.models)};
            }
          }
        },
        batch: true,
        pageSize: 7,
        schema: {
          model: {
            id: "ProductID",
            fields: {
              ProductID: { editable: false, nullable: true },
              ProductName: { validation: { required: true } },
              UnitPrice: { type: "number", validation: { required: true, min: 1} },
              Discontinued: { type: "boolean" },
              UnitsInStock: { type: "number", validation: { min: 0, required: true } }
            }
          }
        }
      });

  $("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    navigatable: true,
    height: 550,
    toolbar: ["save"],
    columns: [
      "ProductName",
      { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
      { field: "UnitsInStock", title: "Units In Stock", width: 120 }
    ],
    editable: true
  });
});

<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<div id="grid"></div>

Answer 2

在 JS Bin http://jsbin.com/pifevi/1/edit?html上找到了这一点的基础 ，输出跳过了不可编辑的字段

添加新的事件处理函数：

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;
        if (e.shiftKey) {
            nextCell = current.prevAll(".editable-cell");
            if (!nextCell[0]) {
                //search the next row
                var prevRow = current.parent().prev();
                var nextCell = prevRow.children(".editable-cell:last");
            }
        } else {
            nextCell = current.nextAll(".editable-cell");
            if (!nextCell[0]) {
                //search the next row
                var nextRow = current.parent().next();
                var nextCell = nextRow.children(".editable-cell:first");
            }
        }
        grid.current(nextCell);
        grid.editCell(nextCell[0]);
    }
});

然后将网格连接到事件

$("#grid").find("table").on("keydown", onGridKeydown);

您需要将可编辑单元格类添加到每个单元格，因此使用 kendo mvc 您可以执行以下操作：

columns.Bound(p => p.foo).HtmlAttributes(new { @class = "editable-cell" }).Title("Foo").Width(120);

本质上确保网格是可导航的

.Navigatable(nav => nav.Enabled(true))