最近常使用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功能愈來愈完整囉~ 讚!