javascript - KendoUI 使用图标而不是自定义命令的按钮

Question

在 Kendo UI 中，是否可以在 KendGrid 中为自定义命令使用图标而不是按钮？我需要这个，因为按钮的最小宽度似乎对我的页面来说太大了。即使我指定宽度，它也不会减少。

    command: [ { name: "Edit",width: 10 ,text:"",imageClass: "k-icon k-i-pencil",
                click: function(e) {
                                    //some code
                                   }
             }]

Answer 1

您可能会覆盖 KendoUI 定义：

.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
    min-width: 0;
}

在这里检查：http: //jsfiddle.net/OnaBai/286F6/

或者您可以尝试降低攻击性（减少附带影响），执行以下操作：

a.k-button.k-button-icontext.k-grid-Edit {
    min-width : 0;
}

在这里检查：http: //jsfiddle.net/OnaBai/286F6/1/

甚至更少：

#grid a.k-button.k-button-icontext.k-grid-Edit {
    min-width : 0;
}

我将它缩小到只有一个特定的网格id="grid"。

在这里检查：http: //jsfiddle.net/OnaBai/286F6/2/

但是如果你不想覆盖 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
                }
            }
        },
        ...
    ],
});

接着：

$(".ob-icon-only", "#grid").parent().css("min-width", 0);

在这里检查：http: //jsfiddle.net/OnaBai/286F6/3/