Kendo Grid自定义动作按钮图标

Question

好吧，这让我感到非常紧张。

我有一对夫妇的自定义工具栏项的剑道UI网格控件。同样的工具栏也有一些“内置”命令（导出到Excel，导出为PDF）

所有作品设计的，但是......内置命令渲染与左边的图标按钮。对于我的生活，我无法弄清楚我需要做些什么来让我的自定义工具栏项目具有与内置命令相同的外观和感觉，即按钮文本左侧有一个指定的图标。

此外，自定义按钮被渲染为锚链接，而内置的命令呈现为按钮。

我不想用模板替换整个工具栏（它基本上是重新发明内置函数的轮子），但我希望我的自定义命令能够像内置命令一样查看和渲染。

有没有办法做到这一点？我已经在这件事上花了太多时间，看起来应该很简单。

我曾尝试：

我试图使自定义的HtmlAttributes命令有k-icon，k-plus各种排列的班，k-refresh ...不幸的是，因为这些渲染为锚，而不是按钮，该库不会在所包含的span元素中呈现图标。

看来还不能应用模板到各个命令，这是很令人沮丧，所以我不能手动构造这些命令看起来类似于内置命令。

 .ToolBar(tb => 
      { 
       tb.Custom().Action("Create", "Cycle").Text("Create New Cycle").HtmlAttributes(new {@class = "k-plus"}); 
       tb.Custom().Name("update-inventory").Text("Update Inventory").HtmlAttributes(
        new {onclick = "onUpdateInventory()", title = "Update the system inventory from the OMS", @class="k-refresh"}); 
       tb.Excel(); 
       tb.Pdf(); 
      }) 

必须有一个简单的解决方案，这...不是吗？

Answer 1

好的，我想通了看起来没错，但是有是做这个的好方法。

首先，一些观察。

1）自定义操作的“名称”方法似乎没有做任何事情。完全一样。它不会为元素创建一个ID属性，就像它为每个其他Kendo小部件所做的一样，所以我必须将该ID添加到HtmlAttributes方法中。

2）k-plus和k-refresh指向精灵表错误的位置。那么，k-plus指向错误的位置;虽然有记录，但在Kendo造型中似乎并不存在。我能够加入我自己的图标定位解决这个问题：

.k-icon-plus { 
    background-position: -48px -64px; 
} 

.k-icon-refresh{ 
    background-position:-48px -112px; 
} 

现在，有趣的是，自定义命令按钮，而呈现为anchor元素，而不是button元素，如内置插件，仍呈现空span里面的元素就像内建插件一样，（大概）是一个图标的占位符。当然，它在MVC的配置包装中无法访问，所以需要使用一些jQuery魔法。

首先，我创建了一个事件，火灾时绑定到数据在我的MVC的包装，像这样的网格：

.Events(e => e.DataBound("onDataBound")) 

接下来，我修改了HtmlAttributes为我的自定义命令，像这样：

tb.Custom().Action("Create", "Cycle") 
    .Text("Create New Cycle").HtmlAttributes(new{id="create-cycle"}); 
tb.Custom().Text("Update Inventory").HtmlAttributes(
    new { onclick = "onUpdateInventory()", title = "Update the system inventory from the OMS", id="update-inventory" }); 

然后，我在JavaScript函数引用我这个有线起来：

function onDataBound() { 
    $('#create-cycle span').addClass('k-icon k-icon-plus'); 
    $('#update-inventory span').addClass('k-icon k-icon-refresh'); 
} 

现在...这个禾RKS。但它很糟糕。它仍然是anchor元素，而不是button元素，而下一个kendo版本可以完全打破这一点。我非常喜欢有人向我展示我如何做一些非常简单的事情，而不是这种荒谬的解决方法。

请请请有人告诉我，这不是正确的做法。

Answer 2

我从一开始就遇到了同样的问题，从我在论坛上看到的看起来模板是要走的路。但您可以使用kendo菜单或kendo按钮小部件使其看起来光滑：

.ToolBar(toolbar => 
    { 
     toolbar.Template(
      @<text> 
      @*Menu*@ 
      <div> 
       @(Html.Kendo().Menu().Name("Toolbar").Items(items => 
       { 
        items.Add().Text("Add").ImageUrl(Url.Content("image.png")); 
       })) 
      </div> 

      @*or Button*@ 
      <div> 
       @(Html.Kendo().Button() 
        .Name("iconButton") 
        .HtmlAttributes(new {type = "button"}) 
        .SpriteCssClass("k-icon k-i-ungroup") 
        .Content("Sprite icon")) 
      </div> 
      </text>); 
    })