从kendogrid命令按钮中删除k-button类 [英] Remove k-button class from kendogrid command buttons

问题描述

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

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.

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

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

推荐答案

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

Yes, I had the same issue a while back. How I achieved this was by defining a template for the command buttons.

{"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也用来绑定到其自身功能的类.

You might now be wondering how the delete and edit functions are bound to these custom buttons. The magic happens with the classes k-grid-delete and k-grid-edit I believe these are the classes kendo also uses to bind to its own functions.

如果您需要绑定到可能的自定义编辑/删除功能.请参考列. command.click文档

If you need to bind to a custom edit/ delete function that is possible too. Refer the columns.command.click documentation

这是一个工作示例

更新

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

In order to mimic the update and clear functionality you can use a combination of command templates and grid methods

这是一个更新的示例

请注意我如何利用 command.click 方法以编程方式处理行并根据需要使用jQuery显示/隐藏命令按钮.

Notice how I have utilized the command.click method to programmatically manipulate the rows and show/hide the command buttons as needed with 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代码段来隐藏保存更新和清除更改按钮的页面加载.

Also dont forget the CSS snippet introduced to hide the save update and clear changes buttons one page load.

这篇关于从kendogrid命令按钮中删除k-button类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！