如果满足条件，则在Kendo Grid中使单元格只读 [英] Make cell readonly in Kendo Grid if condition is met

问题描述

假设我有这样的数据：

[
    {ID: 1, SomeForeignKeyID: 4, IsFkEnabled: true},
    {ID: 2, SomeForeignKeyID: 9, IsFkEnabled: false}
]

Kendo Grid正在使用这些数据：

Kendo Grid is using this data:

columns.Bound(m => m.ID);
columns.ForeignKey(p => p.SomeForeignKeyID, ViewBag.ForeignKeys as IEnumerable<object>, "Value", "Name");

以下是问题：如何使ForeignKey列可编辑，但仅限于行，其中IsFkEnabled == true ？编辑模式为InCell。

Here's the problem: how to make ForeignKey column editable, but only in rows, where IsFkEnabled == true? Edit mode is InCell.

推荐答案

注意：

• 此解决方案仅适用于单元格内编辑（内联或弹出编辑
  需要不同的方法）


• 第一种方法可以导致在某些情况下对不想要的视觉效果（网格
  跳跃）;如果您遇到这种情况，我建议使用方法＃2


• 如果您想使用MVC包装器，方法＃2可能无效（尽管可能会扩展Kendo.Mvc .UI.Fluent.GridEventBuilder）;在这种情况下，你需要在JS中绑定编辑处理程序

方法＃1

使用网格的编辑事件然后执行以下操作：

Use the grid's edit event and then do something like this:

$("#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
}

此处演示（ 2014年第一季度更新）

要通过MVC流利语法使用此功能，只需在名称上方提供匿名编辑功能（例如 onEdit ）：

To use this via the MVC fluent syntax, simply give the anonymous edit function above a name (e.g. 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"))
)

这样做的缺点是在编辑事件被触发之前首先创建编辑器，这有时会产生不良的视觉效果。

The disadvantage to this is that the editor gets created first before the edit event is triggered, which can sometimes have undesirable visual effects.

方法＃2

通过使用触发 beforeEdit <的变体覆盖其 editCell 方法来扩展网格/ code> event;要使用网格选项，您还需要覆盖init方法：

Extend the grid by overriding its editCell method with a variation that triggers a beforeEdit event; for that to work with grid options, you'll also need to override the init method:

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：

then use it similar to #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 方法。
请在此处查看此方法演示。

The difference of this approach is that the editor won't get created (and focused) first. The beforeEdit method is using the same isEditable method from #1. See a demo for this approach here.

如果你想在MVC包装器中使用这种方法但不想/不能扩展GridEventBuilder，你仍然可以用JavaScript绑定你的事件处理程序（位于网格MVC初始化器下面）：

If you want to use this approach with MVC wrappers but don't want / can't extend GridEventBuilder, you can still bind your event handler in JavaScript (place below the grid MVC initializer):

$(function() {
    var grid = $("#grid").data("kendoGrid");
    grid.bind("beforeEdit", onEdit.bind(grid));
});

这篇关于如果满足条件，则在Kendo Grid中使单元格只读的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！