剑道网格列禁用并有条件地启用答案

【问题标题】：Kendo grid columns disable and make enable conditionally剑道网格列禁用并有条件地启用
【发布时间】：2016-12-02 18:08:05
【问题描述】：

我希望我的剑道网格的列在绑定后只读。我的页面中有一个下拉列表。根据下拉列表的选定值，我想启用编辑选定行中的单元格。

有人有示例代码吗？

【问题讨论】：

标签： kendo-ui grid

【解决方案1】：

可以像这样实现所需的行为：

使用Grid的edit事件，检查DropDownListvalue()，如果要阻止编辑，执行Grid的closeCell()方法退出编辑模式。如果用户尝试将新项目添加到网格 (e.model.isNew())，您还需要使用相应的 dataSource 方法remove() 这个新项目。
使用 DropDownList 的 change 事件在自定义 CSS 样式的 Grid 中隐藏与 CRUD 相关的按钮。

另一个可能的选择是每次 dropDownList 值更改时，通过setOptions 使用正确的编辑设置重新创建和重新绑定 Grid。

以下示例使用上述第一种方法。您可以对其进行修改，以便不仅切换删除按钮，还切换添加新记录。

<!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({
          	change: function(e) {
            	$("#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>

【讨论】：

我认为他还可以在每列中使用编辑器选项（函数），并且在编辑器函数中，他可以有条件地调用 closeCell() 或返回适当的容器，因此他可以更好地控制要禁用的列编辑或启用编辑