javascript KendoUI 使用图标而不是自定义命令的按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19900334/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
KendoUI using icons instead of buttons for Custom Commands
提问by nette
In Kendo UI is it possible to use icons instead of buttons for the custom commands in a KendGrid? I need this because the buttons seem to have a minimum width which is too big for my page. Even when i specify the width it does not reduce.
在 Kendo UI 中，是否可以在 KendGrid 中为自定义命令使用图标而不是按钮？我需要这个，因为按钮似乎有一个最小宽度，这对我的页面来说太大了。即使我指定宽度它也不会减少。
command: [ { name: "Edit",width: 10 ,text:"",imageClass: "k-icon k-i-pencil",
click: function(e) {
//some code
}
}]
回答by OnaBai
You might overwrite KendoUI definition:
您可能会覆盖 KendoUI 定义：
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 0;
}
Check it here: http://jsfiddle.net/OnaBai/286F6/
在这里检查：http: //jsfiddle.net/OnaBai/286F6/
Or you might try being less aggressive(reduce collateral effects) doing:
或者您可以尝试不那么激进（减少附带影响）：
a.k-button.k-button-icontext.k-grid-Edit {
min-width : 0;
}
Check it here: http://jsfiddle.net/OnaBai/286F6/1/
在这里检查：http: //jsfiddle.net/OnaBai/286F6/1/
Or even a little less:
或者甚至少一点：
#grid a.k-button.k-button-icontext.k-grid-Edit {
min-width : 0;
}
Where I narrow it to only one specific grid with id="grid".
我把它缩小到只有一个特定的网格id="grid"。
Check it here: http://jsfiddle.net/OnaBai/286F6/2/
在这里检查：http: //jsfiddle.net/OnaBai/286F6/2/
But if you don't want to overwrite Kendo UI style, you still can do:
但是如果你不想覆盖 Kendo UI 风格，你仍然可以这样做：
$("#grid").kendoGrid({
dataSource: myDataSource,
columns: [
{
command: {
name: "Edit",
text:"",
imageClass: "k-icon k-i-pencil ob-icon-only",
click: function(e) {
//some code
}
}
},
...
],
});
and then:
接着：
$(".ob-icon-only", "#grid").parent().css("min-width", 0);
Check it here : http://jsfiddle.net/OnaBai/286F6/3/
