Kendo Grid命令列 - 如何用图标替换按钮?

时间:2015-01-28 09:32:04

标签: javascript kendo-ui kendo-grid

我在网格中锁定了命令列(见下图)。

enter image description here

我想用自定义图标(或用Kendo提供的一组图标)替换默认按钮。

我怎样才能轻松完成?

我试图在文档中找到一些东西,但没有运气。

感谢您的任何建议。

编辑:添加按钮代码

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

3 个答案:

答案 0 :(得分:6)

您还可以在命令中使用imageClass或iconClass。我不确定区别是什么,但任何一个似乎都有效。

感谢OnaBai,我可以分叉的工作示例。

注意,我添加了FontAwesome样式表,可以通过类轻松地换出图标。



$(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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

如果您不想操纵KendoUI生成的HTML,您可以简单地使用定义和CSS。

如果您的命令定义类似于:

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

您可以定义以下CSS,将按钮更改为仅自定义图标:

.k-grid-onabai, .k-grid-onabai:hover {
    background-image: url(http://cdn.kendostatic.com/2014.3.1316/styles/Default/sprite_2x.png);
    background-position: 192px -248px;
    min-width: 32px !important;
    min-height: 32px !important;
}

即。将text设置为空格(&nbsp;),如果命令的nameonabai,则需要在其中定义样式k-grid-onabai和{{1 }}

以下运行示例:

&#13;
&#13;
k-grid-onabai:hover
&#13;
$(document).ready(function(e) {
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { 
        command: [
          { 
            name: "onabai",
            text: "&nbsp;",
            click: function (e) {
              alert ("clicked");
            }
          }
        ] 
      }
    ],
    dataSource: [ { name: "Jane Doe" } ]
  });
});
&#13;
&#13;
&#13;

答案 2 :(得分:0)

简单方法:只需在text属性上添加bootstrap图标,并使用“”覆盖imageClass和iconClass

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