使用有条件禁用的控件进行内联编辑 [英] Inline editing with conditionally disabled controls

问题描述

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

I am using the Telerik Kendo UI grid. I have configured it to use grid inline editing. I have an interesting requirement. One of the columns is a checkbox and this defines whether some of the controls are editable or not. i.e when ticked columns E,F,G are read-only and others are editable. When unticked column B,C are editable and others are read-only.

我已经成功实现了该功能，但是我想对其进行改进.我已经实现了它，以便禁用控件.但是，我希望将控件更改为诸如显示模式"之类的标签.

I have successfully implemented this but I would like to improve it. I have implemented it so that the controls are disabled. However, I would prefer if it the controls change to labels such as the Display Mode.

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

The problem with my implementation as can be seen below is that it is not very clear for the user which items are editable and which items are not. That is why I would like to change the disabled controls to labels or maybe hide them completely. Is there a functionality in the Grid API for implementing this ... or maybe I should implement this using jquery?

被勾选时:

取消勾选时:

推荐答案

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

I'd suggest creating custom editors for the columns that should be disabled and then conditionally append read-only content instead of the editor, e.g. like this:

网格:

$("#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类添加到容器中，并在自定义编辑器中进行检查.

You could set the model.disabled property in your changeControlStatusNumeric function, or if you don't want an additional field in the model, you can add a CSS class to the container and check for that in the custom editor.

(演示)

这篇关于使用有条件禁用的控件进行内联编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！