Kendo UI使用笔记

简介: 1.Grid中的列字段绑定模板字段方法参数传值字符串加双引号:上图就是个典型的例子,openSendWin方法里Id,EmergencyTitle,EmergencyDetail 三个参数,后两个参数是string类型,必须加双引号,否则报错,解决的方式就是加\"2.

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



目录
相关文章
|
1月前
|
Web App开发 缓存 JavaScript
JQuery Kendo UI使用技巧总结
JQuery Kendo UI使用技巧总结
20 4
|
11月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之1
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之1
45 0
|
11月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之7
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之7
60 0
|
9月前
|
缓存 自然语言处理 BI
CocosCreator3.8研究笔记(二十)CocosCreator UI组件(四)
CocosCreator3.8研究笔记(二十)CocosCreator UI组件(四)
197 0
|
9月前
|
前端开发 Android开发
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)(3)
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)
|
9月前
|
Android开发 iOS开发 容器
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)(2)
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)
356 0
|
9月前
|
JavaScript 数据安全/隐私保护 Android开发
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)(1)
CocosCreator3.8研究笔记(十九)CocosCreator UI组件(三)
187 0
|
11月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
48 0
前端学习笔记202306学习笔记第五十三天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之2
|
11月前
|
前端开发 JavaScript
前端——Kendo UI的一些知识点
前端——Kendo UI的一些知识点
|
11月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之1
前端学习笔记202306学习笔记第五十二天-react.js & material-ui之构造数据,tabs和Grid部分的点击事件中之1
38 0

相关课程

更多