KendoUI-网格风格的默认编辑、删除、更新和取消按钮

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

这样试试，

这只是剑道网格添加按钮，

 .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按钮图标。

Answer 2

尝试定义以下样式：

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

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

请在此处查看：http://jsfiddle.net/OnaBai/wv2x2uxv/1/

Answer 3

您可以通过css 隐藏文本

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

Answer 4

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

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

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