Kendo Grid, How to enable edit on next editable column pressing tab key?

Question

I have a editable grid, which is editable after click on the selected cell.

I would like to ask:

Is possible to enable event that after tab is pressed, is edit mode moved into next editable field on same row?

Thanks for any help.

Answer 1

Found basis for this on JS Bin http://jsbin.com/pifevi/1/edit?html,output which skips non editable fields

Add a new event handling function:

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

Then wire up the grid to the event

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

You need to add the editable-cell class to each cell so with kendo mvc you would do:

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

And essentially make sure the grid is navigatable

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

Answer 2

Set navigatable to true in the Grid initialization. The documentation says:

$(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>