博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Kendo UI使用笔记
阅读量:5832 次
发布时间:2019-06-18

本文共 3454 字,大约阅读时间需要 11 分钟。

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了。可以传递参数。如下所示

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

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("添加");        }        else {            modelWindow.title("编辑");            $("#ProductId").change();            aObj.html("更新");        }    }

转载地址:http://rardx.baihongyu.com/

你可能感兴趣的文章
爬取所有校园新闻
查看>>
32、SpringBoot-整合Dubbo
查看>>
python面向对象基础
查看>>
HDU 2044 一只小蜜蜂(递归)
查看>>
docker 下 安装rancher 笔记
查看>>
spring两大核心对象IOC和AOP(新手理解)
查看>>
数据分析相关
查看>>
Python LDAP中的时间戳转换为Linux下时间
查看>>
微信小程序蓝牙连接小票打印机
查看>>
环境错误2
查看>>
C++_了解虚函数的概念
查看>>
全新jmeter视频已经上架
查看>>
Windows 8下如何删除无线配置文件
查看>>
oracle系列(五)高级DBA必知的Oracle的备份与恢复(全录收集)
查看>>
hp 服务器通过串口重定向功能的使用
查看>>
国外10大IT网站和博客网站
查看>>
android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果
查看>>
zabbix 批量web url监控
查看>>
MongoDB CookBook读书笔记之导入导出
查看>>
shell如何快速锁定所有账号
查看>>