Question

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

重复问题的步骤：

在第一个单元格中编辑文字
点击标签键
从网格中失去焦点。

请帮忙解决。

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

更新字段数据后的kendo grid MVVM内联编辑焦点问题

1 个答案: