注意事项：
- 此解决方案仅适用于单元格内编辑（内联或弹出式编辑
需要不同的方法）
- 第一种方法可能会导致不需要的视觉效果（网格
跳跃）在某些情况下；如果你经历过，我
推荐方法#2
- 如果您想使用 MVC 包装器，方法 #2 可能不起作用（尽管可以扩展 Kendo.Mvc.UI.Fluent.GridEventBuilder）；在这种情况下，您需要在 JS 中绑定编辑处理程序
方法#1
使用网格的edit 事件，然后执行以下操作：
$("#grid").kendoGrid({
dataSource: dataSource,
height: "300px",
columns: columns,
editable: true,
edit: function (e) {
var fieldName = e.container.find("input").attr("name");
// alternative (if you don't have the name attribute in your editable):
// var columnIndex = this.cellIndex(e.container);
// var fieldName = this.thead.find("th").eq(columnIndex).data("field");
if (!isEditable(fieldName, e.model)) {
this.closeCell(); // prevent editing
}
}
});
/**
* @returns {boolean} True if the column with the given field name is editable
*/
function isEditable(fieldName, model) {
if (fieldName === "SomeForeignKeyID") {
// condition for the field "SomeForeignKeyID"
// (default to true if defining property doesn't exist)
return model.hasOwnProperty("IsFkEnabled") && model.IsFkEnabled;
}
// additional checks, e.g. to only allow editing unsaved rows:
// if (!model.isNew()) { return false; }
return true; // default to editable
}
Demo here(updated for Q1 2014)
要通过 MVC 流式语法使用此功能，只需在匿名 edit 函数上方命名（例如 onEdit）：
function onEdit(e) {
var fieldName = e.container.find("input").attr("name");
// alternative (if you don't have the name attribute in your editable):
// var columnIndex = this.cellIndex(e.container);
// var fieldName = this.thead.find("th").eq(columnIndex).data("field");
if (!isEditable(fieldName, e.model)) {
this.closeCell(); // prevent editing
}
}
并像这样引用它：
@(Html.Kendo().Grid()
.Name("Grid")
.Events(events => events.Edit("onEdit"))
)
这样做的缺点是编辑器是在触发编辑事件之前首先创建的，这有时会产生不良的视觉效果。
方法 #2
通过使用触发beforeEdit 事件的变体覆盖其editCell 方法来扩展网格；要使用网格选项，您还需要重写 init 方法：
var oEditCell = kendo.ui.Grid.fn.editCell;
var oInit = kendo.ui.Grid.fn.init;
kendo.ui.Grid = kendo.ui.Grid.extend({
init: function () {
oInit.apply(this, arguments);
if (typeof this.options.beforeEdit === "function") {
this.bind("beforeEdit", this.options.beforeEdit.bind(this));
}
},
editCell: function (cell) {
var that = this,
cell = $(cell),
column = that.columns[that.cellIndex(cell)],
model = that._modelForContainer(cell),
event = {
container: cell,
model: model,
field: column.field
};
if (model && this.trigger("beforeEdit", event)) {
// don't edit if prevented in beforeEdit
if (event.isDefaultPrevented()) return;
}
oEditCell.call(this, cell);
}
});
kendo.ui.plugin(kendo.ui.Grid);
然后像#1一样使用它：
$("#grid").kendoGrid({
dataSource: dataSource,
height: "300px",
columns: columns,
editable: true,
beforeEdit: function(e) {
var columnIndex = this.cellIndex(e.container);
var fieldName = this.thead.find("th").eq(columnIndex).data("field");
if (!isEditable(fieldName, e.model)) {
e.preventDefault();
}
}
});
这种方法的不同之处在于编辑器不会首先被创建（和聚焦）。 beforeEdit 方法使用与 #1 相同的 isEditable 方法。
见demo for this approach here。
如果您想将此方法与 MVC 包装器一起使用，但不想/不能扩展 GridEventBuilder，您仍然可以在 JavaScript 中绑定您的事件处理程序（放置在网格 MVC 初始化程序下方）：
$(function() {
var grid = $("#grid").data("kendoGrid");
grid.bind("beforeEdit", onEdit.bind(grid));
});