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

【问题标题】：kendo grid MVVM Inline Edit Focus issue after updating field data更新字段数据后剑道网格 MVVM 内联编辑焦点问题
【发布时间】：2014-01-24 11:22:07
【问题描述】：

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

重复问题的步骤：

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

请帮忙解决。

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 >

【问题讨论】：

标签： jquery kendo-ui kendo-grid kendo-mvvm

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

【讨论】：