Kendo UI使用笔记

1.Grid中的列字段绑定模板字段方法参数传值字符串加双引号：

Kendo UI使用笔记

上图就是个典型的例子，openSendWin方法里Id，EmergencyTitle，EmergencyDetail 三个参数，后两个参数是string类型，必须加双引号，否则报错，解决的方式就是加\"

2.Kendo UI 打开模态框读取远程数据：

都用的KenUI 辅助方法写的
定义模态框

定义事件弹出这个模态框：


    function openSendWin(contentId,title,content)
    {
        var win = $("#sendWin").data("kendoWindow");
        win.center().open()
        win.refresh({
            url: "@Url.Action("SendPart","EmergencyPlan")",
            type:"port" ,
            data: {
                contentId: contentId,
                title: title,
                content:content
            },
        })
        win.center().open();        
    }
语法很简单，写下来怕自己忘了（我是不是记忆力有问题）


3.Kendo UI Grid自动占满浏览器的高度：

一般的都得加上这三个方法  .

一般要求的Grid显示正常的效果图：



3.Kendo UI Grid绑定的列时间字段格式化：
.Format("{0:yyyy-MM-dd HH:mm:ss}");



4.Kendo UI 添加时间控件框DatePicker刷新Grid：

使用Kendo UI中的Grid经常会和DatePicker一起用，选择时间刷新Grid这个场景非常常见，具体的操作分为以下两步
1. 在DataSource的Read方法中添加Data事件，这个addData的方法作用就是返回DatePicker中的时间 事例：

2.在DatePicker中添加change事件pubchange  事例：


然后写一个pubchange事件,刷新kendo Ui grid


    function pubChange() {
        var grid = $("#mygrid").data("kendoGrid");
        grid.dataSource.read();
    }


5.Kendo UI Tabstrip选项卡加载远程数据

kendo ui 中tabstrip使用的数据来自远程，这个时候就得使用辅助方法LoadContentFrom了。可以传递参数。如下所示


6.Kendo UI Grid添加滚动条：
  .Scrollable(c => c.Height("100%"))

7.Kendo UI DatePicker只显示可选择年月：
mvc辅助方法：
       @(Html.Kendo().DatePicker()
              .Name("monthpicker")
              .Start(CalendarView.Year)
              .Depth(CalendarView.Year)
              .Format("yyyy-MM")
              .Value("November 2011")
              .HtmlAttributes(new { style = "width: 100%" })
        )
js：



8.Kendo UI Grid编辑和添加显示按钮不一致
kendo UI grid中打开编辑和新增模态框的标题和按钮都是一样，很明显不对，所以我们要在Edit事件中这样修改

    function onEdit(e) {
        var modelWindow = e.container.data("kendoWindow");
        var aObj = $(".k-window").find("a.k-grid-update");
        console.info(aObj);
        if (e.model.isNew()) {
            modelWindow.title("添加记录");
            aObj.html("<span class='k-icon k-add'></span>添加");
        }
        else {
            modelWindow.title("编辑");
            $("#ProductId").change();
            aObj.html("<span class='k-icon k-add'></span>更新");
        }
    }