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

【问题标题】：Kendo Grid, How to enable edit on next editable column pressing tab key?Kendo Grid，如何在按 Tab 键的下一个可编辑列上启用编辑？
【发布时间】：2014-11-11 21:37:13
【问题描述】：

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

我想问一下：

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

感谢您的帮助。

【问题讨论】：

标签： javascript kendo-ui kendo-grid

【解决方案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>

【讨论】：

请注意，剑道选择的属性navigatable不是单词，正确拼写的navigable将不起作用。

【解决方案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);

您需要为每个单元格添加可编辑单元格类，因此使用 kendo mvc 您可以：

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

并且基本上确保网格是可导航的

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

【讨论】：