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

Question

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

我想问一下：

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

感谢您的帮助。

Answer 1

在网格初始化中将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,output找到此基础 跳过不可编辑的字段

添加新的事件处理功能：

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

您需要将editable-cell类添加到每个单元格，以便使用kendo mvc：

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

基本上确保网格可导航

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