轉自 http://blog.csdn.net/dj2008/article/details/45313805
最近的項目里用到了Kendo UI。這貨很好很強大，但可惜官方文檔組織的並不是很好，有很多配置非常坑，需要自己去發掘。
一、版本
首先，是版本的區別。簡單的來說，免費版的Kendo UI是不包含DataViz組件的，即沒有圖表功能，並且也沒有服務端的Helper，比如MVC的wapper，所以，免費版只有js和css，不會給你dll的。
收費版，比如for MVC的這個版本，除了包含dataviz以外，還包含預先定義好的mvc wapper，所以你需要引用dll才能使用kendo的html helper。這些Helper的功能僅僅是生成對應的JS，對於熟悉C#的程序員來說，圖個方便而已。不過不得不承認，這些helper的設計是一流的，使用lambda表達式來配置參數感覺非常棒。
總結一下，如果你的團隊前端程序員非常碉，你可以使用免費版，但不包含圖表組件。如果你是像我一樣的屌絲ASP.NET猿，又為了快速開發應用，你就應該買收費版。999美元，賣個腎就有了。
二、和bootstrap 3.0的樣式沖突問題
一開始我就發現kendo ui的最新版和bootstrap 3.0的樣式有小沖突了，官方論壇里也說目前不支持。但是有個臨時的解決辦法，可以override一下bootstrap 3.0的CSS。不兼容的問題主要是因為box-sizing引起的：
/* kendo ui blow up hack with bootstrap 3.0 */
.k-widget, .k-widget *, .k-animation-container * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .k-window-titlebar.k-header { -moz-box-sizing: content-box !important; -webkit-box-sizing: content-box !important; box-sizing: content-box !important; } .k-window-title { font-size: 12px; }
這段CSS記的加在bootstrap的后面，瀏覽器才會更具優先級使用后面的CSS覆蓋前面的。
三、Grid的數據綁定
如果你發現Grid數據綁不上，首先檢查這些問題：
1. jQuery引用了沒？如果引用了，那它的位置是在哪里？按照MVC4以后的默認模板，jquery是在頁面尾部的，而kendo生成的js會渲染在jquery的上面，這樣就爆掉了。所以建議把jquery單獨拿到header里面。
2. kendo.aspnetmvc.min.js引用了沒？這個JS是專門為了配合kendo在服務端的代碼而用的，有了它，grid就可以傳遞POST請求而不是GET請求，並且后台才能正確的做model binding。
首先，如果是binding to remote data的話，kendo要求后台返回JSON字符串，所以你的action必須返回JsonResult。當然，方法簽名可以是ActionResult，畢竟JsonResult is-a ActionResult。
另外，參數必須含有kendo自己的request參數：public ActionResult GetChannelGridData( [DataSourceRequest]DataSourceRequest request )。
最后，拿到數據后，必須用kendo的dll里對IQueryable的拓展方法去擼一遍，才能擼成kendo grid認識的JSON格式：
var grid = list.ToDataSourceResult(request); return Json(grid);
4. 關於分頁、排序、篩選的服務端操作
簡單的說，如果你的數據源是IQueryable的，比如從EntityFramework里返回的，那kendo ui grid會自動幫你處理所有的服務端操作。不然的話，你就應該看看custom binding的文檔：
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/custom-binding
四、Grid的外鍵列
Grid的外鍵列可以在編輯模式里自動變成下拉列表，不過這是個大坑，光看官網demo你肯定是擼不出來的。
首先，在后台，你需要一個方法來返回這個下拉列表：
private void PopulateChannels()
{
var channels = db.Channel .Select(c => new ChannelViewDataModel { ChannelId = c.Id, Title = c.Title }) .OrderBy(e => e.Title).ToList(); ViewData["channels"] = channels; ViewData["defaultChannel"] = channels.FirstOrDefault(); }
public ActionResult Index()
{
PopulateChannels();
return View(); }
然后，Grid里，對外鍵列這樣配置：
columns.ForeignKey(p => p.ChannelId, (IEnumerable
)ViewData["channels"], "ChannelId", "Title").Title("渠道");
DataSource里這樣配置：
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.ChannelId).DefaultValue(((ChannelViewDataModel)ViewData["defaultChannel"]).ChannelId); })
記的一定要配默認值，不然當下拉列表只有一個值的時候，是傳不回后台的，這應該是個bug。
最后是個最最坑爹的，你需要一個EditorTemplate才能讓它顯示為下拉列表！！！
@using Kendo.Mvc.UI
@(Html.Kendo().DropDownListFor(m => m) .DataValueField("ChannelId") .DataTextField("Title") .BindTo((System.Collections.IEnumerable)ViewData["channels"]) )
坑爹還在繼續，有了這個template，你還得在model里寫一筆UIHint：
public class ActivationDataGridModel { public Guid Id { get; set; } [UIHint("ChannelDropDown")] public Guid? ChannelId { get; set; } [UIHint("NumericSelector")] public int NumberOfActivation { get; set; } [UIHint("Date")] public DateTime? PubDate { get; set; } public ActivationDataGridModel() { Id = Guid.NewGuid(); } }
五、如何讓Kendo Window只有在點擊后才彈出，並且居中顯示
據我研究，在MVC Wapper里是不能實現的。這里我們必須手寫JS了。
首先，你需要一個承載窗體內容的DIV：<div id="chartwindow"></div>
然后，用jquery給你的按鈕或鏈接注冊一個點擊事件：
$(function () { $("#viewChart").click(function () { if (null == currentSelectedChannelId) { alert('請先選擇一個渠道'); } else { console.info(currentSelectedChannelId); $("#chartwindow").kendoWindow({ "modal": true, "iframe": true, "draggable": true, "pinned": false, "title": "@ViewBag.SelectedProductTitle", "resizable": true, "content": "@Url.Content("~/ActivationData/GetChartImage?channelId=")" + currentSelectedChannelId, "width": 720, "height": 480, "actions": ["Refresh", "Maximize", "Close"] }); $("#chartwindow").data("kendoWindow").open(); $("#chartwindow").data("kendoWindow").center(); } }); })
居中顯示的代碼在最后一行，.center()方法。
六、折線圖Line Chart自動步長
默認情況下，你很容易做出這樣的chart：
但是你需要這樣的chart：
.CategoryAxis(axis => axis
.Justify()
.Date().AutoBaseUnitSteps(a =>
{
a.Days(1);
a.Weeks(2); a.Months(3); }) .BaseUnitStep(0) .Categories(model => model.PubDate.Value) )
分別給你需要的場景，比如日、周、月設置默認步長后，再指定BaseUnitStep為0就好了，0就是自動的，默認是1，會爆的