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

Question

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

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);
                            }
                        });
                    });
                }

Answer 1

我想您的dataBound事件正在运行之前，网格的DOM已完全呈现。这是我过去遇到的常见问题，因此我将所有DOM更改代码都包装在setTimeout中。是的，这很丑陋，但更糟糕的是，剑道小部件上缺少事件。

不管怎么说，比您做的更好的解决方案（imho）是在模板本身内部处理该条件。试试这个：

template: "<div><a href='\\#' class='k-grid-Revocation'><i class='k-icon k-i-close'# if (data.ShipmentStatus != 1) { ##=" disabled='disabled'"## } #></i></a></div>"

如果disabled="disabled"，上述条件将i打印到ShipmentStatus != 1标签。然后，您可以删除dataBound中的所有代码。

Answer 2

列自定义命令的最大问题是，您无法访问row的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;
        }
    }
]