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

Posted 2023-02-15

【中文标题】如何重新排列 KendoGrid 选项卡顺序？

【英文标题】：How to rearrange KendoGrid Tab Order?

【发布时间】：2012-11-10 02:02:04

【问题描述】：

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

我的标记：

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

任何建议将不胜感激。

【问题讨论】：

虽然editable 工作正常，但导航选择网格上所有列的问题是什么？

是的。当我点击标签时，焦点移动到下一列就好了，但我想跳过不可编辑的列并跳转到下一个可编辑的列。

您可以在JSFiddle 或JSBin 上发布样本吗？我很乐意提供帮助，但如果能够从交互式示例开始，那就太好了。

【参考方案1】：

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

我创建了一个用于测试目的的 jsfiddle：http://jsfiddle.net/danieltulp/kfG7y/

我认为你需要看看 using attributes: tabindex: "999999" in

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

但这似乎不起作用。谁有更好的主意？

也许这是不可能的？

【讨论】：

+1 感谢您将 jsFiddle 放在您的答案中。 -1 因为没有给我答案。 +1，因为我很高兴我不是唯一一个遇到这个问题的人。这对我来说仍然没有解决。我希望剑道能解决这个问题。 （对不起，我只能给你+1）

这不是我的代码。只是剑道网站上的演示。创建它以尝试为您解决它但失败了。感谢您的 +1

【参考方案2】：

您能否尝试将网格选项上的editable 属性从true 更改为"inline"，如果这样可以解决问题，请告诉我？我在this JSBin 中创建了一个类似的场景，当我编辑一行时，tab 顺序可以正常工作（OSX 上的 Chrome）。

【讨论】：

我正在进行批量编辑。我真的只有一个可编辑的列。当标签被点击时，我只需要跳下一行。通过将其更改为内联。用户现在必须在每一行上单击保存。