Làm cách nào để sắp xếp lại Thứ tự tab KendoGrid?

Question

Tôi đang sử dụng KendoGrid và thực hiện chỉnh sửa hàng loạt nội dòng. Chỉ một vài cột được chọn có thể chỉnh sửa được. Khi nhấn vào cột tiếp theo được chọn nhưng nó không phải là cột có thể chỉnh sửa tiếp theo. Có cách nào để kiểm soát thứ tự tab trong KendoGrid không? Tôi làm cách nào để các tab bỏ qua các cột không thể chỉnh sửa được?

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

Bất kỳ lời đề nghị sẽ được đánh giá rất nhiều.

Answer 1

Bạn có thể thử thay đổi thuộc tính editable trên tùy chọn lưới từ true thành "inline" và cho tôi biết nếu điều đó khắc phục được sự cố không? Tôi đã tạo một kịch bản tương tự trong this JSBin và thứ tự tab hoạt động tốt (Chrome trên OSX) khi tôi chỉnh sửa hàng.

Answer 2

Để bỏ qua ô bạn cần phải sử dụng tabindex="99999"

Tôi tạo ra một jsfiddle cho mục đích thử nghiệm: http://jsfiddle.net/danieltulp/kfG7y/

Tôi nghĩ rằng bạn cần phải nhìn vào sử dụng thuộc tính: {tabIndex: "999999"} trong

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

nhưng điều này dường như không hoạt động. Bất cứ ai một ý tưởng tốt hơn?

Có lẽ điều này không thể thực hiện được?