Kendo UI使用笔记-阿里云开发者社区

开发者社区> 开发与运维> 正文

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



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章