Kendo網格列禁用並有條件啓用

我希望我的Kendo網格的列在綁定後爲只讀。我的頁面中有一個下拉列表。根據下拉列表的選定值，我想啓用編輯所選行中的單元格。Kendo網格列禁用並有條件啓用

有沒有人有示例代碼？

2016-12-02 user3352074

有可能達到這樣的期望行爲：

使用edit事件的電網，檢查的DropDownList value()，如果要防止編輯，執行電網的closeCell()方法退出編輯模式。如果用戶嘗試向網格添加新項目（e.model.isNew()），則還需要remove()此新項目以及各自的dataSource方法。
使用DropDownList的change事件隱藏與自定義CSS樣式的網格中的CRUD相關按鈕。

另一個可能的選擇是重新創建，並通過setOptions每次重新綁定使用正確的編輯設置網格的下拉列表值發生變化。

以下示例使用上述第一種方法。您可以修改它，這樣不僅刪除按鈕被切換，而且添加新記錄。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <base href="http://demos.telerik.com/kendo-ui/grid/editing/"> 
 
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
    <title>Kendo UI</title> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css" /> 
 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css" /> 
 

 
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script> 
 
    <script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script> 
 
    
 
    <style> 
 
     .hideDeleteButtons .k-grid-delete { 
 
     visibility: hidden; 
 
     } 
 
     
 
    </style> 
 
    
 
    </head> 
 
    <body> 
 
    <div id="example"> 
 

 
     <p><label for="dropdownlist">Grid editing is:</label> 
 
     <select id="dropdownlist"><option value="1">enabled</option><option value="0">disabled</option></select></p> 
 

 
     <div id="grid"></div> 
 

 
     <script> 
 
     $(document).ready(function() { 
 

 
      $("#dropdownlist").kendoDropDownList({ 
 
      \t change: function(e) { 
 
      \t $("#grid").toggleClass("hideDeleteButtons", e.sender.value() !== "1"); 
 
      } 
 
      }); 
 

 
      var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service", 
 
       dataSource = new kendo.data.DataSource({ 
 
       transport: { 
 
        read: { 
 
        url: crudServiceBaseUrl + "/Products", 
 
        dataType: "jsonp" 
 
        }, 
 
        update: { 
 
        url: crudServiceBaseUrl + "/Products/Update", 
 
        dataType: "jsonp" 
 
        }, 
 
        destroy: { 
 
        url: crudServiceBaseUrl + "/Products/Destroy", 
 
        dataType: "jsonp" 
 
        }, 
 
        create: { 
 
        url: crudServiceBaseUrl + "/Products/Create", 
 
        dataType: "jsonp" 
 
        }, 
 
        parameterMap: function(options, operation) { 
 
        if (operation !== "read" && options.models) { 
 
         return {models: kendo.stringify(options.models)}; 
 
        } 
 
        } 
 
       }, 
 
       batch: true, 
 
       pageSize: 10, 
 
       schema: { 
 
        model: { 
 
        id: "ProductID", 
 
        fields: { 
 
         ProductID: { editable: false, nullable: true }, 
 
         ProductName: { validation: { required: true } }, 
 
         UnitPrice: { type: "number", validation: { required: true, min: 1} }, 
 
         Discontinued: { type: "boolean" }, 
 
         UnitsInStock: { type: "number", validation: { min: 0, required: true } } 
 
        } 
 
        } 
 
       } 
 
       }); 
 

 
      $("#grid").kendoGrid({ 
 
      dataSource: dataSource, 
 
      navigatable: true, 
 
      pageable: true, 
 
      height: 300, 
 
      toolbar: ["create", "save", "cancel"], 
 
      columns: [ 
 
       { field: "ProductName", title: "Product Name" }, 
 
       { command: "destroy", title: "&nbsp;", width: 200 }], 
 
      editable: true, 
 
      edit: function(e) { 
 
       var dropdownlist = $("#dropdownlist").data("kendoDropDownList"); 
 
       if (dropdownlist.value() !== "1") { 
 
       e.sender.closeCell(); 
 
       if (e.model.isNew()) { 
 
        e.sender.dataSource.remove(e.model); 
 
       } 
 
       } 
 
      } 
 
      }); 
 
     }); 
 
     </script> 
 
    </div> 
 

 

 
    </body> 
 
</html>

來源

2016-12-03 08:16:38 dimodi

我認爲他還可以用每列和編輯功能，他可以有條件地closeCell（）或返回相應的容器內的編輯選項（功能），讓他有更多的控制權該列禁用編輯或啓用編輯 –

Kendo網格列禁用並有條件啓用

回答

相關問題