在条件下禁用 Kendo Telerik UI 字体图标答案

【问题标题】：Disable Kendo Telerik UI font icon on condition在条件下禁用 Kendo Telerik UI 字体图标
【发布时间】：2020-03-18 12:15:17
【问题描述】：

我尝试在剑道网格中禁用网络字体图标，但我不知道该怎么做！这是我的代码 sn-p 但它不起作用。如果您能帮助我，我将不胜感激。

command: [
          {
              name: "Revocation",
              click: revocation,
              template: "<div><a href='\\#' class='k-grid-Revocation'><i class='k-icon k-i-close'></i></a></div>"
           },
          ],width: 30

 dataBound: function (e) {
                    var grid = $("#grid_Shipment").data("kendoGrid");
                    var items = e.sender.items();
                    $.each(items, function (index) {
                        var dataItem = grid.dataItem(this);
                        $("tr[data-uid='" + dataItem.uid + "']").find(".k-grid .k-icon").each(function (index) {
                            if (dataItem.ShipmentStatus != 1) {
                                $(this).addClass('k-state-disabled').prop('disabled', true);
                            }
                        });
                    });
                }

【问题讨论】：

我不确定为什么这不起作用，但请注意，模板可以是一个将 dataItem 作为参数的函数，这样可以使您的代码更简单。试试这种方法。

标签： jquery kendo-ui telerik kendo-grid

【解决方案1】：

columns 自定义命令的最大问题是您无法访问行的 dataItem 并且您无法像在列模板中那样操作它们。官方文档，或者更好地说，官方论坛支持说使用它的方式与您使用它的方式相同（使用 dataBound）。我发现它对于像禁用图标或类似的小功能来说有点太复杂了。

我想出了解决方法，它不干净，但我可以接受。在行初始化时执行visible 函数，您可以在那里访问行dom并对其进行操作。例如，我添加了带有项目数据条件的类custom-disabled：

command: [
    {
        name: 'delete',
        template: '<a class="btn btn-action btn-lg k-grid-delete" href="\\#"><span class="fas fa-trash" aria-hidden="true"></span></a>',
        click(e) {
            _deleteCommand(_getGridData(e));
        },
        visible: function (item) {
            if (item.disableDelete) {
                setTimeout(function () {
                    $("[data-uid=" + item.uid + "]").find('.k-grid-delete').addClass('custom-disabled');
                }, 0);
            }
            return true;
        }
    }
]
//CSS
.custom-disabled {
    pointer-events: none;
    opacity: .65;
}

或者，如果你没问题，你可以像这样隐藏该命令：

command: [
    {
        name: 'delete',
        template: '<a class="btn btn-action btn-lg k-grid-delete" href="\\#"><span class="fas fa-trash" aria-hidden="true"></span></a>',
        visible: function (item) {
            return item.disableDelete;
        }
    }
]

【讨论】：