Inline editing with conditionally disabled control

Question

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('');
            }
        }

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?

When Ticked:

When Unticked:

Answer 1

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:

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

Editor:

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"
            }
        }
    });
}

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.

(demo)