劍道UI電網command.imageClass中缺少ASP MVC幫手

Question

許多純HTML樣品指使用劍道UI網格的命令的 的imageCLASS屬性：

$("#grid").kendoGrid({ 
dataSource: myDataSource, 
columns: [ 
    { 
     command: { 
      name: "Edit", 
      text:"", 
      imageClass: "k-icon k-i-pencil ob-icon-only", 
      click: function(e) { 
       //some code 
      } 
     } 
    }, 
    ... 
], 

}）;

我使用的劍道UI ASP MVC版本，它似乎沒有這個屬性來設置。我錯過了什麼？

如果這是真的錯過（我不希望），還是我怎麼能在JavaScript甚至設置該屬性？ （我想繼續我的HTML輔助渲染，而不是做一切在JavaScript中，該解決方案是顯而易見的......）

Answer 1

在MVC助手，您不會使用的imageCLASS;你會使用HtmlAttributes屬性。你可以這樣定義它：

columns.Command(o => o.Edit().Text("") 
.HtmlAttributes(new { @class = "k-icon k-i-pencil ob-icon-only" })); 

祝你好運。

編輯：爲什麼不修改CSS以適應？

.ob-icon-only span{ } 

關於加入劍道類內部span元素，你能做到這一點的數據綁定並修改相應的元素。

Answer 2

指定自定義樣式，最方便的方法是使用自動生成的k-grid-NAME_OF_COMMAND類。如果這在目前的實現中不適用，我建議你綁定到dataBound事件並在那裏附上類。取消編輯後，使用OnCancel事件再次替換圖標。

例子

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

的JavaScript

function onDataBound(e) { 
    $(".k-grid-NAME_OF_COMMAND").addClass("k-icon k-i-pencil ob-icon-only"); 
} 

或者

function onDataBound(e) { 
    $(".k-grid-edit").find("span").removeClass("k-icon k-edit"); 
    $(".k-grid-edit").find("span").addClass("k-icon k-i-pencil ob-icon-only"); 
} 

取消編輯時添加取消事件，確保圖標停留。

function onCancel(e) { 
    e.preventDefault(); 
    e.sender.refresh(); 
} 

結果

其他測試

使用$(".k-grid-edit").find("span").addClass("k-icon k-i-cancel ob-icon-only");