jquery - 更新字段数据后剑道网格 MVVM 内联编辑焦点问题

Question

我们正在尝试使用在线编辑模式下的所有字段创建 Kendo Grid。当编辑字段选项卡更改不移动到下一个控件时，我们面临问题。

重复问题的步骤：

1. 编辑第一个单元格中的文本
2. 点击tab键
3. 从网格中失去焦点。

请帮忙解决。

http://jsfiddle.net/suniltvl/eUhP5/

JS：

var vm = kendo.observable({

    roles: [{
        firstname: "test",
        lastname: "test",
        username: "test",
    }, {
        firstname: "test1",
        lastname: "test1",
        username: "test1",
    }, {
        firstname: "test2",
        lastname: "test2",
        username: "test2",
    }]

});

kendo.bind($("#people"), vm);

HTML

<div id="people">
    <div data-role="grid" data-bind="source: roles" data-row-template="role-template" data-columns='[{"field": "firstName", "title": "First Name"}, 
                        {"field": "lastName", "title": "Last Name"}, 
{"field": "username", "title": "user name"}]'></div>
</div>
<script type="text/x-kendo-template" id="role-template">
    < tr class = "k-grid-edit-row" > < td > < input type = "text"
    class = "k-textbox"
    data - bind = "value:firstname" / > < /td>
    <td>
        <input type="text"  class="k-textbox"  data-bind="value:lastname"/ > < /td>
    <td>
      <input type="text"  class="k-textbox"  data-bind="value:username"/ > < /td>

    </tr >

Answer 1

Kendo Grid 的navigatable属性打开了网格的键盘导航。我的Grid Jsfiddle演示了如何使用这个属性。通常，当您定义一个网格时，它会与每个单元格一起定义为仅显示元素，并且当用户在该单元格上单击/单击时，Kendo 将动态显示输入元素。

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    navigatable: true,
    pageable: true,
    sortable: true,
    resizable: true,
    reorderable: true,
    editable: true,
    columns: [{
        field: "FirstName",
        width: 90,
        title: "First Name"
    }, {
        field: "LastName",
        width: 200,
        title: "Last Name"
    }, {
        field: "City",
        width: 200
    }]
}).data("kendoGrid");