Kendo UI Grid：如何使单元格在条件下只读

Posted 2023-05-07

【中文标题】Kendo UI Grid：如何使单元格在条件下只读

【英文标题】：Kendo UI Grid: how to make cell read only on condition

【发布时间】：2014-07-31 06:17:30

【问题描述】：

在 Kendo UI Grid（使用 Angularjs）中，我有以下网格：

<div kendo-grid k-data-source="Table" k-options="thingsOptions" style="height: 365px">

$scope.thingsOptions = 
    sortable: "true",
    scrollable: "true",
    toolbar: [ name: "create", text: "Aggiungi Prodotto" ],
    columns: [
                 field: "Name", title: "Name", width: "50px" ,
                 field: "Description", title: "Description", width: "50px" ,
                 field: "Price", title: "Price", width: "50px" ,
                 field: "Active", title: "Active", template: '<input type="checkbox" disabled="disabled" #= Active ? checked="checked":"" # class="chkbx"  />', width: "20px" ,
                 command: [ name: "edit", text: "Modifica" ], title: "", width: "172px" 
    ],
    editable: "inline"
;

如何在某些情况下将“价格”字段设为只读？我必须测试一个变量，如果它是真的，我希望 Price 字段只读，否则可写。

我已经尝试在“thingsOptions”功能中添加：

edit: function (e) 
  if(myvar == true)
        e.container.find("input[name=Price]").enable(false);
 

但是 id 不起作用（未定义的引用）。

【问题讨论】：

Make cell readonly in Kendo Grid if condition is met 的可能重复项

【参考方案1】：

尝试使用：

edit: function (e) 
    if(myvar == true)
        $("input[name=Price]").attr("readonly", true);
     else 
        $("input[name=Price]").attr("readonly", false);
    

【参考方案2】：

在网格的编辑功能中，只需按照您想要使用的方式操作条件。要关闭单元格，您可以使用 this.closeCell();

      edit: function (e) 

         //Size will be editable only when the Area is not empty 
         if(e.container.find(“input”).attr(“name”) == ‘Price’)  
           //Below statement will close the cell and stops the editing.
           if(myvar == true)
            this.closeCell();
           
         
        

更多信息请查看here

【参考方案3】：

columns: [
                editable: false,
                field: "Id",
                title: "Id",
                width: 50,
                editor: idEditor,
            , 
                title: "Name",
                field: "Name",
                width: 100
            , 
                command: ["edit", "destroy"],
                title: " ",
                width: "250px"
            ]  

function idEditor(container, options) 
        container.append(options.model.Id);