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

我正在使用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

来源

2014-07-13 Joseph Caruana

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

网：

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

您可以设置model.disabled属性在changeControlStatusNumeric功能，或者，如果你不想在模型中的附加字段，您可以将CSS类添加到容器并在自定义编辑器中检查它。

（demo）

来源

2014-07-13 18:35:22

谢谢你的详细解答。不得不做一个自定义编辑器有点矫枉过正，但我想这是实现它的唯一方法。 –

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

回答

相关问题