Question

我正在使用kendogrid中的“编辑，销毁”按钮。这些呈现为按钮，但是如果我删除k-button类，则可以将其呈现为图标。

是否可以从所有这些按钮中删除k按钮类？

Answer 1

是的，前一段时间我遇到了同样的问题。我是通过为命令按钮定义模板来实现这一目标的。

{"command": [
    {
      "text": "Edit",
      "template": "<a role='button' class='k-button k-button-icontext k-grid-edit'><span class='k-icon k-i-edit'></span></a>"
    },
    {
      "text": "Delete",
      "template": "<a role='button' class='k-button k-button-icontext k-grid-delete'><span class='k-icon k-i-close'></span></a>"
    }
  ]
}

您现在可能想知道删除和编辑功能如何绑定到这些自定义按钮。神奇的事情发生在类k-grid-delete和k-grid-edit上，我相信这些是kendo也用来绑定到其自身功能的类。

如果您需要绑定到可能的自定义编辑/删除功能。请参阅columns.command.click documentation

这里是working example

更新

为了模仿更新和清除功能，可以结合使用命令模板和grid methods

Here is an updated example

请注意，我是如何利用command.click方法以编程方式操纵行并根据需要使用jQuery来显示/隐藏命令按钮的。

{
  name: "cust-edit",
  template: "<a role='button' class='k-button k-button-icontext k-grid-cust-edit'><span class='k-icon k-i-edit'></span></a>",
  click(e){
    var grid = $("#grid").data("kendoGrid");
    var tr = $(e.target).closest("tr"); // get the current table row (tr)
    grid.editRow(tr); //manually trigger edit on row
    $(tr).find('.k-grid-cust-edit, .k-grid-delete').hide();
    $(tr).find('.k-grid-cust-update, .k-grid-cust-clear').show();
  }
}

也不要忘记引入CSS代码段来隐藏保存更新和清除更改按钮的页面加载。

从kendogrid命令按钮中删除k-button类

1 个答案: