带有条件禁用控件的内联编辑

Question

我正在使用 Telerik Kendo UI 网格。我已将其配置为使用网格内联编辑。我有一个有趣的要求。其中一列是一个复选框，它定义了某些控件是否可编辑。即当勾选列 E、F、G 是只读的而其他列是可编辑的。未勾选时，B、C 列是可编辑的，而其他列是只读的。

我已经成功实现了这一点，但我想改进它。我已经实现了它，以便禁用控件。但是，如果控件更改为显示模式等标签，我更愿意。

function gridEdit(e) {
            setRowStatus(e.container, e.model.IsCustomJob);           
        }

  function setRowStatus(c, isSpecificSH) {
            changeControlStatusNumeric(c, 'ColumnB', !IsCustomJob);
            changeControlStatusNumeric(c, 'ColumnC', !IsCustomJob);
            changeControlStatusNumeric(c, 'ColumnE', IsCustomJob);
            changeControlStatusNumeric(c, 'ColumnF', IsCustomJob);
            changeControlStatusDropDown(c, 'ColumnG', IsCustomJob);
        }

 function changeControlStatusNumeric(c, name, isEnabled) {
            var ctrl = c.find("input[name='" + name + "']").data("kendoNumericTextBox");
            ctrl.enable(isEnabled);
            if (!isEnabled) {
                ctrl.value('');
            }
        }

如下所示，我的实现存在的问题是，用户不太清楚哪些项目是可编辑的，哪些项目是不可编辑的。这就是为什么我想将禁用的控件更改为标签或者完全隐藏它们。 Grid API 中是否有实现此功能的功能...或者我应该使用 jquery 实现此功能？

勾选时：

未勾选时：

Answer 1

我建议为应该禁用的列创建自定义编辑器，然后有条件地附加只读内容而不是编辑器，例如像这样：

网格：

$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 430,
    toolbar: ["create"],
    columns: [{
        field: "ProductName",
        title: "Product Name"
    }, {
        field: "Category",
        title: "Category",
        width: "160px",
        editor: categoryDropDownEditor,
        template: "#=Category.CategoryName#"
    }, {
        field: "UnitPrice",
        title: "Unit Price",
        format: "{0:c}",
        width: "120px"
    }, {
        command: ["edit", "destroy"]
    }],
    editable: "inline"
});

编辑：

function categoryDropDownEditor(container, options) {
    // if model is set to disabled we don't show an editor
    if (options.model.disabled) {
        $("<span>" + options.model.get(options.field).CategoryName + "</span>").appendTo(container);
        return;
    };

    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
        autoBind: false,
        dataSource: {
            type: "odata",
            transport: {
                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
            }
        }
    });
}

您可以在 changeControlStatusNumeric 函数中设置 model.disabled 属性，或者如果您不想在模型中添加其他字段，您可以将 CSS 类添加到容器并在自定义编辑器中进行检查。

(demo)