Kendo Grid：禁用行编辑

Question

我有一个可编辑的网格，并希望根据条件使某些行不可编辑。

任何人都可以请咨询我该怎么做。

谢谢

Answer 1

开箱即用，没有允许控制每行版本的功能。当该行尝试编辑时，您可以执行的是退出编辑。

有一个事件edit一旦一个单元格进入编辑模式，就会被触发。你能做的就是一旦你发现你的条件是真的就关闭那个单元格。

例子：我们有如下定义schema网格：

schema : { 
    model: { 
     fields: { 
      Id  : { type: 'number' }, 
      FirstName: { type: 'string' }, 
      LastName : { type: 'string' }, 
      City  : { type: 'string' } 
     } 
    } 
} 

我们不希望让行这City是Seattle版。该edit处理程序应定义为：

var grid = $("#grid").kendoGrid({ 
    dataSource: ds, 
    editable : true, 
    edit  : function (e) { 
     // e.model contains the model corresponding to the row that is being edited. 
     var data = e.model; 
     if (data.City === "Seattle") { 
      // Close the cell (exit edition mode) 
      this.closeCell(); 
     } 
     e.preventDefault(); 
    }, 
    pageable : true, 
    columns : 
      [ 
       { field: "FirstName", width: 90, title: "First Name" }, 
       { field: "LastName", width: 90, title: "Last Name" }, 
       { field: "City", width: 100 } 
      ] 
}).data("kendoGrid"); 

的问题是电池后实际处于编辑模式，以便关闭可能会产生一些闪烁，但在大多数情况下，它应该工作edit处理函数。

第二个选项是定义网格为不可编辑，并调用editCell如果手动条件为真：

在这种情况下可以定义grid为：

var grid = $("#grid").kendoGrid({ 
    dataSource: ds, 
    editable : false, 
    pageable : true, 
    columns : 
      [ 
       { field: "FirstName", width: 90, title: "First Name" }, 
       { field: "LastName", width: 90, title: "Last Name" }, 
       { field: "City", width: 100 } 
      ] 
}).data("kendoGrid"); 

，然后定义一个click处理器的单元格：

grid.tbody.on("click", "td", function (e) { 
    // Close any possible cell already in edit mode 
    grid.closeCell(); 
    // Find data corresponding to clicked cell 
    var data = grid.dataItem($(e.target).closest("tr")); 
    // Check condition 
    if (data.City !== "Seattle") { 
     // Enter edition mode 
     grid.editCell(e.target); 
    } 
}); 

我在哪里检索data为row对应于所点击的表格单元以及对条件的检查。如果条件匹配，然后我打开单元格。

尽管这没有闪烁，但它并不是我的首选，因为您需要小心地触发save以保存单元格，尽管您说网格不可编辑，但您正在编辑它。

运行第一个实现此例如：http://jsfiddle.net/OnaBai/NWw7T/ 和第二的位置：http://jsfiddle.net/OnaBai/NWw7T/1/

对于除“盒内”最简单的实现相同功能创建一个自定义的编辑按钮，如果控制的其他版本模式一排应该或不应该进入编辑模式。

Answer 2

对我来说，我想阻止用户在尝试添加新行时双击其他行。举个例子，这个代码：

var IDS = { 
    myGrid: "#my-grid", 

    addRowBtn: "#add-btn", 
    deleteRowBtn: "#delete-btn", 
    saveRowBtn: "#save-btn", 
    cancelRowBtn: "#cancel-btn", 
}; 

var Grids = { 
    MyGrid: null, 
    //... 
}; 

然后在初始化函数创建一个事件处理程序的响应双击事件：

function initMyGrid() { 
    $(IDS.myGrid).kendoGrid({ 
     selectable: true, 
     scrolable: true, 
     sortable: false, 
     columns: [ 
      { field: "FirstName", title: "First Name", width: "20%", attributes: { tabindex: "1" } }, 
      { field: "LastName", title: "Last Name", width: "60%", attributes: { tabindex: "2" } } 
     ] 
    }); 
    //... 
    Grids.MyGrid = $(IDS.myGrid).data('kendoGrid'); 

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) { 
     Grids.MyGrid.editCell($(this)); 
    }); 
} 

然后我创建了PageState值测试：

var PageState = { 
    // ... 
    AddingRow: false 
}; 

因此，当用户点击一个按钮来添加一个新行，我阻止他们点击编辑任何其他行：

function addNewRow() { 
    PageState.AddingRow = true; 

    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) { 
     if (PageState.Selected.RowId != null && PageState.Selected.RowId != "") { 
      Grids.RulesGrid.closeCell(); 
     } 
    }); 
    // ... 
} 

而且，只要用户保存行或抵消增加一个新行的，我重新启用双击事件：

function saveRow() { 
    PageState.AddingRow = false; 

    // Allow user to edit other records now 
    Grids.MyGrid.element.on("dblclick", "tbody>tr>td:not(.k-edit-cell)", "dblclick", function(e) { 
     Grids.MyGrid.editCell($(this)); 
    }); 
    // ... 
} 

HTH。