如何重新排列KendoGrid选项卡顺序？

Question

我正在使用KendoGrid进行内联的批量编辑。只有少数几列是可编辑的。当按下Tab键时，下一列被选中，但它不是下一个可编辑的列。有没有办法在KendoGrid中控制Tab键的顺序？如何使选项卡跳过不可编辑的列？

我的标记：

<div id="employeeGoalsGrid"></div>

我的Javascript：

var goalsDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: '/MVC/ResearcherPoints/GetEmployeeResearchers',
                type: 'POST',
                contentType: 'application/json'
            },
            update: {
                url: '/MVC/ResearcherPoints/UpdateEmployeeGoal',
                type: 'POST',
                contentType: 'application/json'
                //dataType: "jsonp"
            },
            parameterMap: function (options, type) {
                debugger;
                $.extend(options, { ID: options.id });
                return JSON.stringify(options);
            }
        },
        batch: false,
        schema: {
            model: {
                id: 'ID',
                fields: {
                    id: { editable: false, nullable: false },
                    FirstName: { editable: false, nullable: true  },
                    LastName: { editable: false, nullable: true },
                    Title: { editable: false, nullable: true },
                    TeamName: { editable: false, nullable: true },
                    PointsGoal: { type: "number", nullable: true, validation: { required: false, min: 1 } }
                }
            }
        },
        sortable: true,
        filterable: true,
        columnMenu: true
    });


    $('#employeeGoalsGrid').kendoGrid({
        dataSource: goalsDataSource,
        navigatable: true,
        sortable: true,
        resizable: true,
        toolbar: ["save", "cancel"],
        columns: [
            { field: "FirstName", title: "First Name", width: 200},
            { field: "LastName", title: "Last Name", width: 200 },
            { field: "Title", title: "Title", width: 200 },
            { field: "TeamName", title: "Team", width: 200 },
            { field: "PointsGoal", title: "Goal", width: 200 }],
        editable: true,
        filterable: true,
    });

任何建议将不胜感激。

- Rodney Hickman

---

你遇到的问题是导航在网格上选择了所有列，尽管“editable”正常工作吗？ - OnaBai

是的。当我按下Tab键时，焦点可以顺利地移动到下一列，但我想跳过不可编辑的列并跳转到下一个可编辑的列。 - Rodney Hickman

你能在 JSFiddle 或 JSBin 上发布一个示例吗？我很乐意帮忙，但从交互式示例开始会更好。 - Brandon Satrom

Answer 1

为了跳过单元格，您需要使用 tabindex="99999"。

我创建了一个jsfiddle用于测试: http://jsfiddle.net/danieltulp/kfG7y/ 我认为您需要查看使用属性: { tabindex: "99999" }。

{ field: "UnitsInStock", title: "Units In Stock", width: 110,  attributes: { tabindex: "999999" } }

但是这似乎不起作用。有没有更好的想法？

也许这根本不可能？

- Daniël Tulp

---

+1 感谢您在答案中提供了jsFiddle。-1 因为您没有给我一个答案。+1 因为我很高兴我不是唯一遇到这个问题的人。对我来说，这仍然是未解决的问题。我希望Kendo能够解决这个问题。（抱歉我只能给你+1） - Rodney Hickman

这不是我的代码。只是从Kendo网站上的演示。我创建它是为了尝试为您解决问题，但失败了。感谢+1。 - Daniël Tulp

Answer 2

你能否尝试将网格选项中的editable属性从true更改为"inline"，并告诉我是否解决了问题？我在this JSBin中创建了一个类似的场景，并且当我编辑一行时，标签顺序正常（在OSX上使用Chrome）。

- Brandon Satrom

---

我正在进行批量编辑。我只需要一个可编辑的单列。当按下Tab键时，我需要跳到下一行。通过将其更改为内联方式，用户现在必须在每一行上单击保存。 - Rodney Hickman