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实现此功能？

勾选后： When Ticked

当被解雇时： When Unticked

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）

使用有条件禁用的控件进行内联编辑

1 个答案: