最近常使用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

Post a comment