转自 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，会爆的