Kendo grid in mobile app with edit delete button without text

Question

I´m starting a mobile app with kendo and I have a litte problem. I want to add a delete and edit button without text but I can´t. In a normal web, not mobile, I do this to create a button only with image

<script type="text/x-kendo-template" id="ButtonTemplate">
     #if(SOME CONDITION){#
         <a  class="k-button k-grid-delete" style="width:30px;min-width:30px;margin:0px;"><span class="k-icon k-delete" ></span></a>
     #if(SOME CONDITION){#
         <a  class="k-button k-grid-edit" style="width:30px;min-width:30px;margin:0px;"><span class="k-icon k-edit"></span></a>
     #} else {# 
        <a  class="k-button" style="width:30px;min-width:30px;margin:0px;" onClick="viewDetails(#=Id#)"><span class="k-icon k-i-refresh"></span></a>
      #}#                                                                                                                                                                                                                           
</script>

The grid:

  $("#grid").kendoGrid({
        dataSource:dataSource3,
        pageable: true,
        mobile: "tablet",
        height: kendo.support.mobileOS.wp ? "24em" : 430,
        resizable: true,
        editable: {
            mode: "popup",
            template: kendo.template($("#popupTemplate").html())
        },
        toolbar: ["create"],
         columns: [
                    {
                    template: buttonTemplate
                    },
                    {
                        field: "TrasladoId",
                        title: "ID",
                        width: 200
                    }, {
                        field: "EmpresaRazonSocial",
                        title: "EmpresaRazonSocial"
                     }, {
                        field: "TipoServicioISTA",
                        title: "TipoServicioISTA"
                    }  
                  ]
    });

The buttons are displayed as follows:

but if I do the same in a mobile app, the button look like this:

All buttons work properly, but no icon is displayed.

If I remove the classes "k-grid-delete" and "k-grid-edit" from anchors, the icons are displayed correctly , but obviously edit or delete methods are not called.

<--EDITTED 1--> If I add an height to the buttons , the icons still are not shown:

I´m using kendo 2015.1.429

<-EDITTED 2--> I solved the problem whith help of @pnm. I had to add this line:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

and I changed the classes 'k-icon k-edit' with 'glyphicon glyphicon-pencil'

Any suggestions?

Answer 1

First, I need to add this line:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

Second, replace the classes 'k-icon k-edit' with 'glyphicon glyphicon-pencil'

The template :

<script type="text/x-kendo-template" id="ButtonTemplate">
     #if(SOME CONDITION){#
         <a  class="k-button k-grid-delete" style="width:30px;min-width:30px;margin:0px;"><span class="glyphicon glyphicon-trash" ></span></a>
     #if(SOME CONDITION){#
         <a  class="k-button k-grid-edit" style="width:30px;min-width:30px;margin:0px;"><span class="glyphicon glyphicon-pencil"></span></a>
     #} else {# 
        <a  class="k-button" style="width:30px;min-width:30px;margin:0px;" onClick="viewDetails(#=Id#)"><span class="glyphicon glyphicon-refresh"></span></a>
      #}#                                                                                                                                                                                                                           
</script>

The buttons:

Thanks to @pnm for the solution

Answer 2

height: kendo.support.mobileOS.wp ? "24em" : 430,

Check it out, the first value has em, but the other value has no units. CSS probably chokes on that. Change it so it has a unit like:

430pt

or whatever it is supposed to be and your buttons will probably have a height then.