Telerik Grid for ASP .NET MVC基本設定

承前文準備好開發環境，開始使用Telerik最威的Grid componment

顧及資料龐大與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要執行的事情，非必要項~~依專案需求與否再加即可。