Kendo UI使用笔记

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

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

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

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

@(Html.Kendo().Window().Name("sendWin")    .Title("发送").Draggable(true)    .Resizable(resiz=>resiz.Enabled(false)               .MinHeight(900)               .MinWidth(760)               .MaxHeight(900)      )      .Visible(false)      .Modal(true)      .Width(800)      .Height(680)      .Content(""))

    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自动占满浏览器的高度：

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

.Scrollable(c => c.Height("100%")).HtmlAttributes(new { @class = "k-grid-autoheight" }).Events(c => c.DataBound("window.kendoGridAutoHeightDataBound"))

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中的时间 事例：

.Read(read => read.Action("FlowJson", "PatrolFlow", new { checkDate = @ViewBag.checkDate }).Data("addData"));  function addData(){  return {       checkDate: kendo.toString($("#checkDate").data("kendoDatePicker").value(),"yyyy-MM-dd")      }}

@(Html.Kendo().DatePicker().Name("checkDate").Events(e=>e.Change("pubChange")));

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

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

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

<p>    @(Html.Kendo().TabStrip().Name("tabstrip_#=EmployeeId#")        .Items(tabstrip =>        {            tabstrip.Add()             .Text("巡更详情")                         .LoadContentFrom("SubPatrol", "PatrolFlow", new { employeeId ="#=EmployeeId#", patrolDate = "#=PatrolDate#" })             .Selected(true);        }).ToClientTemplate()    )</p>

6.Kendo UI Grid添加滚动条：

  .Scrollable(c => c.Height("100%"))

7.Kendo UI DatePicker只显示可选择年月：

       @(Html.Kendo().DatePicker()              .Name("monthpicker")              .Start(CalendarView.Year)              .Depth(CalendarView.Year)              .Format("yyyy-MM")              .Value("November 2011")              .HtmlAttributes(new { style = "width: 100%" })        )

   $("#monthpicker").kendoDatePicker({                    //定义打开时显示的格式为年                    start: "year",                    //定义当日历应该返回日期为年                    depth: "year",                    //显示输入格式为年月                    format: " "                });

    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>更新");        }    }