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; //新的值

傳遞Telerik Grid中勾選(checkbox)的資料

Telerik Grid透過client-side templates去擺放checkbox，可讓使用者勾選資料以進一步傳遞多選的資料列，範例網址grid_checkbox_ajax
該範例只綁定單一欄位(欄位類型Int)，本文示範前端如何綁定多個欄位，以及後端接收後的重組方式

UI
@(Html.Telerik().Grid()
.Name("Grid")
.Columns(columns => {
columns.Bound(o => o.CompanyId).ClientTemplate("< input type ='checkbox' name='checkedRecords' value='<#=CompanyId #>;<#=Name #>' / > ");
columns.Bound(o => o.Name);
columns.Bound(o => o.EnglishName);
columns.Bound(o => o.Phone);
})
.DataBinding(d => d.Ajax().Select("AjaxBinding", "Partner"))
.Pageable()
)
//按下btnAdd後要將勾選的資料傳遞到後端
< input type="button" name="btnAdd" id="btnAdd" value="Add Partner" class = "t-button" / >

Javascript
$(document).ready(function () {
$('#btnAdd').click(function () {
var $checkedRecords = $(':checked');
//先確認使用者是否沒有勾選任何資料
if ($checkedRecords.length < 1) {
alert('你沒有選擇任何資料列 !');
return;
}
//把勾選的資料傳到後端
$.post('AddPartners', $checkedRecords,
function (Data){
alert(Data.Message);
}, 'json');
});
});

C#
[HttpPost]
public ActionResult AddPartners(string[] checkedRecords)
{
try
{
for (int i = 0; i < checkedRecords.Length; i++)
{
string[] Values = checkedRecords[i].Split(';');
string aa = Values[0] ;
string bb = Values[1] ;
//aa 和 bb就是前面組合的CompanyId和Name，接下來就可以繼續做其他運算
}
return new JsonResult { Data = new { Flag = "Y", Message = "OK !" } };
}
catch (Exception ex)
{
return new JsonResult { Data = new { Flag = "N", Message = ex.Message } };
}
}

善用JavaScriptSerializer處理JSON資料

MVC開發常透過jQuery傳值，前陣子發現System.Web.Extensions提供一款好用的System.Web.Script.Serialization.JavaScriptSerializer，前端傳來的JSON資料只要下個簡單的JavaScriptSerializer，就能輕易將資料由JSON formate還原為想要的格式呢！

前幾天看到同事傳遞ListBox所有option到後端，方法是自組html string，後端接收到再反向重組成其他格式（例如SelectListItem），前後端都要大費不少行數去轉換資料～
後來piggy改採JavaScriptSerializer，輕輕鬆鬆就達到相同效果！寫法如下：


1.前端將ListBox內所有option組成JSON formate data
data以javascript的Array組合
function OK() {
var result = new Array();
$("#myListBox1 option").each(function () {
var item = {
Value: $(this).val(),
Text: $(this).text()
};
result.push(item);
});
var json = JSON.stringify(result);
$.ajax({
url: '@Url.Action("MyAction")',
type: 'POST',
data: { json: json }
});
}

2.後端接收資料以JavaScriptSerializer處理
public void MyAction(string json)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
List< selectlistitem> myList = new List< selectlistitem>();
myList = jss.Deserialize< List< selectlistitem>>(json);
}

隱藏Telerik Grid之更新按鈕

使用Telerik Grid for MVC除非有極特殊需求，一般還是建議採官方提供的用法，不然前後端有時候都要自己多做工還蠻麻煩的XD

Grid在資料編輯方面有Insert、Update、Delete、BatchEditing
最近做的專案需要Insert & Delete（本文不討論Batch）但又不允許使用者Update，可是Update按鈕和Insert按鈕是同一個!!!  請看下列連環圖說明

預設編輯畫面(可以Insert、Update、Delete)
上方的"Add new record"按鈕可插入一筆新資料，右側的"Commands"欄位有"Edit"和"Delete"按鈕，但Edit按鈕身兼二職～請續看連環圖

圖一

click圖一的Edit按鈕後，該列資料會開啟編輯狀態（例如label變成可輸入的input），本來的Edit按鈕也因編輯狀態而變成"Update"按鈕

圖二

click圖一的Add new record按鈕後，會新增一筆空白資料列，本來的Edit按鈕因新增變成"Insert"按鈕

圖三

簡單來說，就是我不希望有圖二的狀態出現，但又想使用Telerik提供的event去完成Insert & Delete。最快（偷懶）的方式就是把圖一Edit按鈕隱藏，實作方式如下

1.在Grid加入ClientEvent
.ClientEvents(c => c.OnDataBound("Grid_OnDataBound"))

2.撰寫Grid_OnDataBound事件
function Grid_OnDataBound(e) {
$("a:contains('Edit')").hide();
}
此寫法只會將< a>中有Edit的部分隱藏，不影響Add new record要用的Insert按鈕，請安心使用 0.<