KendoUI using icons instead of buttons for Custom Commands

Question

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.

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

Answer 1

You might overwrite KendoUI definition:

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

Check it here: 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/

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".

Check it here: http://jsfiddle.net/OnaBai/286F6/2/

But if you don't want to overwrite Kendo UI style, you still can do:

$("#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/