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"))

一般要求的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中的时间 事例：

.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")
      }
}

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

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

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

    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只显示可选择年月：

mvc辅助方法：

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

js：

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

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