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