Telerik Grid的水平捲軸

Telerik Grid資料過多時除分頁設定.Pageable(),還可使用.Scrollable()讓Grid有捲軸可拉動,一般只有垂直方向出現捲軸,那是因為Column寬度沒設定!
若水平方向也要有捲軸必須把所有Column寬度都設定好,否則Telerik會自動以最佳寬度去排列資料,造成資料行無限長~~版面破碎的情況。

設定範例如下
@(Html.Telerik().Grid< mydocument>()
.Name("Grid")
.Columns(columns => {
columns.Bound(o => o.UserName).Width(100);
columns.Bound(o => o.UserId).Width(200);
columns.Bound(o => o.Address).Width(100);
})
.DataBinding(d => d.Ajax().Select("_AjaxBinding", "Home"))
.Scrollable())

參考出處
網址:MVC Grid Horizontal Scrolling
資訊:Horizontal scrolling is enabled automatically in case the total width of the columns exceeds the width of the grid  and the Scrollable method is invoked. Make sure you have specified the width of your columns though.

Telerik Grid之OnSave event

OnSave event的撰寫大概不脫下列模式
< script type="text/javascript">
function Grid_onSave(e) {
var dataItem = e.dataItem;
var values = e.values;
var form = e.form;
//event handling code
}

又MVC中常使用強型別,傳遞整個Model作資料更新,如果你的頁面僅止於最簡單的Model傳遞,那麼OnSave enevt一般是極少用到。

但總是有些情況需要新舊值比對(驗證等等),那麼就要仔細注意e.dataItem與e.values的差別!
e.dataItem  →  舊的值(本來的資訊~存在DB的)
e.values       →  新的值(使用者keyin~準備更新的新資訊)

當然二者都是值的集合,若要取單一值,直接指定欄位名稱即可。假設有個自定義Model如下
public class UserInfo{
public string UserName { get; set; }
public string UserId { get; set; }
public string Company { get; set; }
}

如果要取UserName的新舊值
var oldUser = e.dataItem.UserName; //舊的值
var newUser = e.values.UserName; //新的值