时间戳

首页 > 解决方案 > Remove k-button class from kendogrid command buttons

angularjs - Remove k-button class from kendogrid command buttons

问题描述

I am using edit, destroy buttons in kendogrid. These are rendered as buttons, but if I remove k-button class, these can be rendered as just icons.

Is it possible to remove the k-button class from all these buttons?

标签： angularjskendo-grid

解决方案

是的，我不久前也遇到了同样的问题。我是通过为命令按钮定义一个模板来实现这一点的。

{"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 文档

这是一个工作示例

更新

为了模仿更新和清除功能，您可以使用命令模板和网格方法的组合

这是一个更新的示例

请注意我如何利用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 片段来隐藏保存更新和清除更改按钮一页加载。

推荐阅读