和上一篇引用同一作者的,同样因为版本的问题,注意:有些写法不一定能用了
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只显示可选择年月:
@(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编辑和添加显示按钮不一致
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>更新"); } }
————————————————
版权声明:本文为CSDN博主「dotnet全栈开发」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/kebi007/article/details/52993142