發現Kendo UI Grid隱藏功能-指定欄位CSS

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