zoukankan      html  css  js  c++  java
  • Kendo UI使用笔记

    和上一篇引用同一作者的,同样因为版本的问题,注意:有些写法不一定能用了

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

    ————————————————
    版权声明:本文为CSDN博主「dotnet全栈开发」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/kebi007/article/details/52993142

  • 相关阅读:
    mysqldump 导出数据库为DBname的表名为Tname的表结构 导出数据库的所有表的表结构
    mysqldump 备份某张表 Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transactions,
    nfs missing codepage or helper program, or other error
    date 增加一个小时 减少一个小时
    mysqldump 备份单个数据库
    mysql删除账户
    怎么删除某个用户的所有帖子?
    mongodb删除重复数据
    ReSharper2018破解详细方法
    激活windows和office
  • 原文地址:https://www.cnblogs.com/djd66/p/15213795.html
Copyright © 2011-2022 走看看