Question

我正在使用剑道启动移动应用，我遇到了一个问题。我想添加一个没有文字的删除和编辑按钮，但我不能。在普通网络中，不是移动网络，我这样做只创建一个带图像的按钮

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

按钮显示如下：

enter image description here

但是如果我在移动应用程序中执行相同操作，则按钮看起来像这样：

enter image description here

所有按钮都正常工作，但不显示图标。

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

＆lt; - EDITTED 1 - ＆gt; 如果我为按钮添加高度，图标仍然不会显示：

enter image description here

我正在使用kendo 2015.1.429

＆lt; -EDITTED 2 - ＆gt; 我在@pnm的帮助下解决了这个问题。我不得不添加这一行：

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

我用'glyphicon glyphicon-pencil'更改了类'k-icon k-edit'

有什么建议吗？

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

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

模板：

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

按钮：

enter image description here

感谢@pnm的解决方案

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

2 个答案: