最近的项目里用到了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。

3. Action的写法。

首先,如果是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,会爆的!