Kendo Grid command column - how to replace buttons with icons?

Question

I have locked command column in the Grid (see image below).

I would like to replace default buttons with custom icons (or with set of icons supplied with Kendo).

How can I easily do it?

I tried to find something in documentation but without luck.

Thanks for any advice.

EDIT: added button code

command:
                    [
                      {
                        name: "destroy",
                        text: $translate.instant('REMOVE'),
                        className: "btn-destroy"

                      },
                      {
                        name: "detail",
                        text: $translate.instant('DETAIL'),
                        click: function(e) {
                          var clickedRow = this.dataItem($(e.currentTarget).closest("tr"));
                          var id = clickedRow.id;
                          GlobalHelperService.redirectTo("/milestone-sequences/detail/"+id);
                          return false;
                        }
                      }
                    ],

Solution 1

You can also use imageClass or iconClass within the command. I'm not sure what the difference is, but either one seems to work.

Thanks OnaBai, for the working example that I could fork.

Note, I added the FontAwesome stylesheet to easily swap out the icon via a class.

$(document).ready(function(e) {
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { 
        command: [
          { 
            name: "onabai",
            text: " ",
            imageClass: "fa fa-trash",
            //iconClass: "fa fa-trash",
            click: function (e) {
              alert ("clicked");
            }
          }
        ] 
      }
    ],
    dataSource: [ { name: "Jane Doe" } ]
  });
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.web.min.js"></script>
<div id="grid"></div>

Solution 2

If you don't want to manipulate the HTML generated by KendoUI you can simply play with the definition and CSS.

If your command definition is something like:

columns: [
    { 
        command: [
            { 
                name: "onabai",
                text: " ",
                click: function (e) {
                    alert ("clicked");
                }
            },
            ...
        ] 
      },
      ...

You can define the following CSS for changing the button to only your custom icon:

.k-grid-onabai, .k-grid-onabai:hover {
    background-image: url(http://cdn.kendostatic.com/2014.3.1316/styles/Default/sprite_2x.png);
    background-position: 192px -248px;
    min-width: 32px !important;
    min-height: 32px !important;
}

i.e. set text to an empty space ( ) and if the name of the command is onabai you need to define there the styles k-grid-onabai and k-grid-onabai:hover.

A running example following:

$(document).ready(function(e) {
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { 
        command: [
          { 
            name: "onabai",
            text: " ",
            click: function (e) {
              alert ("clicked");
            }
          }
        ] 
      }
    ],
    dataSource: [ { name: "Jane Doe" } ]
  });
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.web.min.js"></script>
<div id="grid"></div>

<style>
  .k-grid-onabai, .k-grid-onabai:hover {
    background-image: url(http://cdn.kendostatic.com/2014.3.1316/styles/Default/sprite_2x.png);
    background-position: 192px -248px;
    min-width: 32px !important;
    min-height: 32px !important;
  }
</style>