javascript - Kendo UI 网格 - 根据 bool 属性禁用自定义命令按钮

Question

如何根据属性的 bool 值将 Kendo 网格上的自定义命令的类设置为禁用？

我想使用这种方法来禁用按钮: https://docs.telerik.com/kendo-ui/knowledge-base/disable-the-grid-command-buttons

Javascript:

{ command: { name: "custom", text: "Exclude", click: excludeCategorization }, title: " ", width: "60px" }

我想使用属性 IsEnabled 添加这样的条件，但如果可能的话使用 k-state-disabled 类

#= IsEnabled ? disabled="disabled" : "" # 

Answer 1

我不认为您可以通过模板有条件地分配类，但是您可以使用 dataBound 事件来爬取行并操作类。我会先禁用所有这些，然后启用需要激活的那些，但您可以构建自己的逻辑。这是一个例子:

<div id="grid"></div>
<script>
  var grid;
  $("#grid").kendoGrid({
    dataBound:function(e){
      var grid = $("#grid").data("kendoGrid");
      var items = e.sender.items();
      items.each(function (index) {
        var dataItem = grid.dataItem(this);
        $("tr[data-uid='" + dataItem.uid + "']").find(".excludeCategorization").each(function( index ) {
          if(dataItem.isEnabled)
             {
                $(this).removeClass('k-state-disabled')   
             }
        });
      })
    },
    columns: [
      { field: "name" },
      { field: "enabled" },
      { command: [{ className: "k-state-disabled excludeCategorization", name: "destroy", text: "Remove" },{ className: "k-state-disabled", name: "edit", text: "Edit" }] }
    ],
    editable: true,
    dataSource: [ { name: "Jane Doe", isEnabled: false },{ name: "John Smith", isEnabled: true } ]
  });
</script>

这是 Dojo 的链接:https://dojo.telerik.com/ubuneWOB