最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to rearrange KendoGrid Tab Order? - Stack Overflow

programmeradmin0浏览0评论

I'm using a KendoGrid and doing a inline batch edit. Only a select few columns are editable. When hit tab the next column selected but it is not the next editable column. Is there a way to control the tab order in a KendoGrid? How would I make the tabs skip columns that are not editable?

My Mark-UP:

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

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

Any suggestions would be greatly appreciated.

I'm using a KendoGrid and doing a inline batch edit. Only a select few columns are editable. When hit tab the next column selected but it is not the next editable column. Is there a way to control the tab order in a KendoGrid? How would I make the tabs skip columns that are not editable?

My Mark-UP:

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

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

Any suggestions would be greatly appreciated.

Share Improve this question asked Nov 21, 2012 at 18:27 Rodney HickmanRodney Hickman 3,13311 gold badges55 silver badges83 bronze badges 3
  • is the problem that navigation selects all columns on your grid although editable works fine? – OnaBai Commented Nov 26, 2012 at 22:29
  • Yes. When I hit tab, the focus moves to the next column just fine but I want to skip the non-editable columns and jump to the next editable column. – Rodney Hickman Commented Nov 27, 2012 at 17:49
  • Can you post a sample on JSFiddle or JSBin? I'd love to help, but it would be great to be able to start from an interactive sample. – Brandon Satrom Commented Nov 28, 2012 at 16:01
Add a ment  | 

2 Answers 2

Reset to default 3

To skip cell you need to use tabindex="99999"

I created a jsfiddle for testing purposes: http://jsfiddle/danieltulp/kfG7y/

I think you need to look at using attributes: { tabindex: "999999" } in

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

but this doesn't seem to work. Anyone a better idea?

Perhaps this just isn't possible?

Can you try changing the editable property on the grid options from true to "inline" and let me know if that fixes the issue? I've created a similar scenario in this JSBin and the tab order works fine (Chrome on OSX) when I edit a row.

发布评论

评论列表(0)

  1. 暂无评论