KendoUI usa icons en lugar de botones para commands personalizados

En Kendo UI, ¿es posible usar icons en lugar de botones para los commands personalizados en un KendGrid? Necesito esto porque los botones parecen tener un ancho mínimo que es demasiado grande para mi página. Incluso cuando especifico el ancho no se networkinguce.

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

One Solution collect form web for “KendoUI usa icons en lugar de botones para commands personalizados”

Puede sobreescribir la definición de KendoUI:

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

Verifíquelo aquí: http://jsfiddle.net/OnaBai/286F6/

O puede intentar ser less agresivo (networkingucir los efectos queueterales) haciendo:

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

Verifíquelo aquí: http://jsfiddle.net/OnaBai/286F6/1/

O incluso un poco less:

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

Donde lo estrecho a solo una grilla específica con id="grid" .

Verifíquelo aquí: http://jsfiddle.net/OnaBai/286F6/2/

Pero si no desea sobrescribir el estilo de UI de Kendo, aún puede hacerlo:

 $("#grid").kendoGrid({ dataSource: myDataSource, columns: [ { command: { name: "Edit", text:"", imageClass: "k-icon ki-pencil ob-icon-only", click: function(e) { //some code } } }, ... ], }); 

y entonces:

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

Verifíquelo aquí: http://jsfiddle.net/OnaBai/286F6/3/

  • Problema de posicionamiento con la información sobre herramientas de kendo ui dentro de una grilla
  • Borre el filtrado sin hacer clic en el button borrar
  • ¿Cómo reorderar las filas de la grilla de kendo?
  • get el evento click en una grilla de kendo
  • ¿Cómo llamar al método javascript desde ClientTemplate en la grilla Kendo?
  • Cómo usar el método SetDataSource de la grilla de la interfaz de usuario de Kendo
  • Editable DataGrid en AngularJS
  • Mostrar HTML codificado en Kendo UI
  • Establecer date de hoy para kendo datepicker
  • cómo establecer el foco de input en la input de la grilla kendo-ui dentro del modal de arranque
  • Angular + Kendo: marcador de position pnetworkingeterminado para la list desplegable
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.