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