Kendo UI - 网格 - 样式默认编辑、删除、更新和取消按钮

Question

如何更改默认的编辑、删除、更新和取消按钮，并将它们替换为带有我的图标的按钮？

我的命令代码：

command: [
        {
            name: 'edit',
            template: "<a if-role-permission=\"['PERMISSION_WORKFLOW_DEFINITION_DELETE']\" class='k-grid-edit k-grid-update k-button'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center;' ><span style='margin: 4px;' class='glyphicon glyphicon-edit'></span></a>"
        },
        {
            name: 'destroy',
            template: "<a if-role-permission=\"['PERMISSION_WORKFLOW_DEFINITION_DELETE']\" class='k-grid-delete k-button'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center;' ><span style='margin: 4px;' class='glyphicon glyphicon-remove-circle'></span></a>"
        }
    ]
} 

Answer 1

columns : [
{ title: "&nbsp;", width: "83px", template: "<a class='k-button' name='DeleteButton'><span class='k-icon k-i-x'></span>Delete</a>" }
]

这将给出一个可以有任何措辞的按钮（在跨度标签之间放置文本），给出的图标是 k-i-x，这是 Telerik 的删除按钮图标......你可以找到更多here。

然后可以通过名称引用此按钮，或者如果您给它一个 ID，则可以通过该 ID 引用它。 它不需要在命令范围内澄清。

Answer 2

你可以通过 css 隐藏文本

.k-grid tbody .k-button {
   min-width: 12px;
   width: 27px;
   height: 27px;
   overflow: hidden;
}

Answer 3

尝试定义以下样式：

.k-button {
    min-width: 32px !important;
    padding: 0!important;
}

您可以将其缩小到您的网格甚至某些按钮。

在这里查看：http://jsfiddle.net/OnaBai/wv2x2uxv/1/

Answer 4

这样试试，

这仅适用于剑道网格添加按钮，

 .k-add
 {
  background: url("/Content/images/loading.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important      
 }

网格

$("#grid").kendoGrid({
 toolbar: [{ name: "create", text: "Add" }],
 column:[{command:[ {
                     name: 'edit',
                     template: "<a if-role-permission=\"['PERMISSION_WORKFLOW_DEFINITION_DELETE']\" class='k-grid-edit k-grid-update k-button'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center;' ><span style='margin: 4px;' class='glyphicon glyphicon-edit'></span>update</a>"
                     },
                     {
                     name: 'destroy',
                     template: "<a if-role-permission=\"['PERMISSION_WORKFLOW_DEFINITION_DELETE']\" class='k-grid-delete k-button'  style='width: 26px; height: 26px; vertical-align: middle; text-align: center;' ><span style='margin: 4px;' class='glyphicon glyphicon-remove-circle'></span>cancel</a>"
                     }]}]
});

注意：如果你这样做，它会影响你所有的grid add按钮图标。