Columna de command de Kendo Grid: cómo replace los botones con icons?

He bloqueado la columna de command en la Grilla (ver image a continuación).

enter image description here

Me gustaría replace los botones pnetworkingeterminados con icons personalizados (o con un set de icons suministrados con Kendo).

¿Cómo puedo hacerlo fácilmente?

Traté de encontrar algo en la documentation, pero sin suerte.

Gracias por cualquier consejo.

EDITAR: código de button agregado

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.networkingirectTo("/milestone-sequences/detail/"+id); return false; } } ], 

También puede usar imageClass o iconClass dentro del command. No estoy seguro de cuál es la diferencia, pero cualquiera parece funcionar.

Gracias OnaBai, por el ejemplo de trabajo que podría bifurcar.

Tenga en count que agregué la hoja de estilo FontAwesome para cambiar fácilmente el ícono a través de una 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> 

Si no quiere manipular el HTML generado por KendoUI, simplemente puede jugar con la definición y CSS.

Si su definición de command es algo así como:

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

Puede definir el siguiente CSS para cambiar el button a solo su icono personalizado:

 .k-grid-onabai, .k-grid-onabai:hover { background-image: url(http://img.javascriptes.com/javascript/sprite_2x.png); background-position: 192px -248px; min-width: 32px !important; min-height: 32px !important; } 

es decir, establecer el text en un espacio vacío ( &nbsp; ) y si el name del command es onabai , debe definir allí los styles k-grid-onabai y k-grid-onabai:hover .

Un siguiente ejemplo de ejecución:

 $(document).ready(function(e) { $("#grid").kendoGrid({ columns: [ { field: "name" }, { command: [ { name: "onabai", text: "&nbsp;", 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://img.javascriptes.com/javascript/sprite_2x.png); background-position: 192px -248px; min-width: 32px !important; min-height: 32px !important; } </style> 

La manera más fácil: simplemente agregue los íconos de arranque en la propiedad de text y anule imageClass e iconClass con ""

 command: [{ name: "destroy", text: "<span class='glyphicon glyphicon-remove'></span>", imageClass: "", iconClass: "", }]