Отключить значок шрифта Kendo Telerik UI при условии - PullRequest
Новая
       39

Отключить значок шрифта Kendo Telerik UI при условии

0 голосов
/ 18 марта 2020

Я пытался отключить значок веб-шрифта при условии в сетке Kendo, но я не знаю, как это сделать! Это мой фрагмент кода, но он не работает. Буду признателен, если вы поможете мне. 

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

1 Ответ

0 голосов
/ 20 марта 2020

Самая большая проблема с пользовательской командой столбцов заключается в том, что вы не можете получить доступ к 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;
        }
    }
]
...