發現Kendo UI Grid隱藏功能-指定欄位CSS
0 | 20,169 |
最近常使用Kendo UI Grid處理清單需求,尤其用ASP.NET MVC 4搭配KendoGridBinder,寫來頗為輕鬆。只是在欄位客製呈現上有個小困擾,例如: 數字欄位希望靠右對齊,最直覺的做法是透過CSS定義
.right-align { text-align: right; }
再透過<td class=”right-align”>套用。只是kendoGrid的column設定選項中,可以指定title、width、format,卻少了指定CSS的參數。一種解法是改為自訂樣版,例如:
{ field: "price", title: "Price ($)", template: '<span class="right-align”>#= price #</span>' }
只為了加一個class屬性就得放棄預設樣版,重新寫一大串語法,不符經濟效益也有失簡潔。所以後來我透過修改kendo.web.js原始碼,自己為column加上css參數,便可寫成:
{ field: "price", title: "Price ($)", css: "right-align" }
最近評估要更新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 += "<td" + stringifyAttributes(column.attributes) + ">";
rowTemplate += that._cellTmpl(column, state);
rowTemplate += "</td>";
}
kendoGrid在產生<td>時,加入了將column.attributes參數轉為<td> Attribute的功能,一個文件沒說的隱藏功能。所以,不需要為了加class去改kendo.web.js囉! 現在只要傳入column.attributes,不但可以指定class,還能指定其他Attribute,例如:
{ field: "price", title: "Price ($)", attributes: { "class":"right-align", "data-boo": "foo" } }
如此會產生<td class=”right-align” data-boo=”foo”>,Kendo UI功能愈來愈完整囉~ 讚!
Comments
Be the first to post a comment