Kendo 移动应用中的网格，带有没有文本的编辑删除按钮

Question

我正在使用 kendo 启动移动应用程序，但遇到了一个小问题。我想添加一个没有文本的删除和编辑按钮，但我不能。在普通网络而非移动网络中，我这样做是为了创建一个仅包含图像

的按钮

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

网格：

  $("#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"
                    }  
                  ]
    });

按钮显示如下：

但如果我在移动应用程序中执行相同操作，按钮将如下所示：

所有按钮都可以正常使用，但没有显示图标。

如果我从锚点中删除类 "k-grid-delete" 和 "k-grid-edit"，图标会正确显示，但显然不会调用编辑或删除方法。

<--已编辑 1--> 如果我给按钮添加高度，图标仍然不显示：

我正在使用 kendo 2015.1.429

<-已编辑 2--> 我在@pnm 的帮助下解决了这个问题。我不得不添加这一行：

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

并且我将类 'k-icon k-edit' 更改为 'glyphicon glyphicon-pencil'

有什么建议吗？

Answer 1

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

查了一下，第一个值有em，但是另一个值没有单位。 CSS 可能会因此而窒息。更改它，使其具有如下单位：

430pt

或者任何它应该是的东西，然后你的按钮可能会有一个高度。

Answer 2

首先，我需要添加这一行：

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

其次，将类'k-icon k-edit'替换为'glyphicon glyphicon-pencil'

模板：

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

按钮：

感谢@pnm 提供解决方案

Kendo 移动应用中的网格，带有没有文本的编辑删除按钮

Kendo grid in mobile app with edit delete button without text

kendo-mobile