kendogrid 单元格样式控制_發現Kendo UI Grid隱藏功能-指定欄位CSS

最近常使用Kendo UI Grid處理清單需求，尤其用ASP.NET MVC 4搭配KendoGridBinder，寫來頗為輕鬆。只是在欄位客製呈現上有個小困擾，例如: 數字欄位希望靠右對齊，最直覺的做法是透過CSS定義 .right-align { text-align: right; }

再透過

套用。只是kendoGrid的column設定選項中，可以指定title、width、format，卻少了指定CSS的參數。一種解法是改為自訂樣版，例如: {  field: "price", title: "Price ($)",  template: '

最近評估要更新Kendo UI版本到v2012.2，面臨自己改寫部分將被覆蓋的問題，也猜想會不會Telerik已經補上了這個功能，查過線上文件失望而歸，準備再動手時卻有意外發現: (kendo.web.js 21,295列)

for (idx = 0; idx < length; idx++) { column = that.columns[idx]; template = column.template; type = typeof template; rowTemplate += "

"; rowTemplate += that._cellTmpl(column, state); rowTemplate += ""; }

kendoGrid在產生

時，加入了將column.attributes參數轉為 Attribute的功能，一個文件沒說的隱藏功能。所以，不需要為了加class去改kendo.web.js囉! 現在只要傳入column.attributes，不但可以指定class，還能指定其他Attribute，例如: { field: "price", title: "Price ($)", attributes: { "class":"right-align", "data-boo": "foo" } }

如此會產生

，Kendo UI功能愈來愈完整囉~ 讚!