顧及資料龐大與server端，我們採用AJAX作為databinding的方式，而Telerik Grid若只作查詢只要撰寫databinding用的func.即可。一個樣式豐富又基本的Grid設定如下
<%= Html.Telerik().Grid < TelerikDemo.Models.Model1 >()
.Name("Grid")
//Column設定
.Columns(columns =>
{
//隱藏欄位
columns.Bound(u => u.Id).Hidden(true);
//欄位寬度
columns.Bound(u => u.Name).Width(120);
//欄位表頭
columns.Bound(u => u.Age).Title("年齡");
//欄位格式
columns.Bound(u => u.Birth).Format("{0:yyyy/MM/dd}");
//欄位以其他控制項呈現
columns.Bound(u => u.Status)
.ClientTemplate("< select > < option value='< #= Status # >' selected='selected' >< #= Status # >< /option >< /select >");
//欄位樣式(直接設定)
columns.Bound(u => u.Tel).
HtmlAttributes(new { style = "color: green" });
})
//資料繫結Select(actionName, controllerName)
.DataBinding(dataBinding => dataBinding.Ajax().Select("_BindingModel1", "Grid"))
//頁籤設定
.Pageable(paging => paging.PageTo(3)//初載時顯示第幾頁
.Position(GridPagerPosition.Both)//分頁的位置
//提供多個PageSize讓用戶彈性更改一頁呈現幾筆資料，而決定PageSize的控制項是PageSizeDropDown
.PageSize(10, new int[] { 5, 10, 20 })
//PageInput讓使用者以keyin方式直接跳到想要的page ;
//NextPreviousAndNumeric表示同時提供上/下一頁與數字頁的功能 ;
//PageSizeDropDown提供下拉式選單更改每頁的筆數
.Style(GridPagerStyles.PageInput | GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageSizeDropDown))
//排序設定
.Sortable(sorting => sorting.OrderBy(order => order.Add(u => u.Name)))
//表格scrollbar
.Scrollable()
//資料分組
.Groupable()
//資料過濾
.Filterable()
.Selectable()
.ClientEvents(e => e.OnRowSelect("onRowSelected"))
%>
至此，在GridController寫個名為_BindingModel1的func.負責取回可於Telerik Grid顯示的資料，Grid就可執行無誤。
另外，最後的onRowSelected則是撰寫於前端的js function，主要是在觸發client端的row on select時告訴Grid要執行的事情，非必要項~~依專案需求與否再加即可。
