关闭

MVC kendo Grid EditorTemplate

标签: mvcGridComboBoxKendoEditorTemplateName
699人阅读 评论(2) 收藏 举报
分类:

最近在使用Kendo控件做项目,使用MVC开发模式,在使用Grid控件的使用需要用到EditorTemplate来实现某一列在编辑的时候呈现为ComboBox,看官网API很自然就想到要用EditorTemplateName来实现,看到EditorTemplateName以为跟其他的使用模版的地方一样,在JS里定义一个Kendo的模版,然后把名字写上就行了,但事实是不行的,这个EditorTemplateName的使用跟别模版不一样?如下:

  1. 要使用EditorTemplateName,首先要定义EditorTemplate,而定义这个EditorTemplate的位置是有要求的:

    • 在项目的Views-->Shared文件夹下新建一个名为EditorTemplates的文件夹
    • 然后在该文件夹下新建EidtorComboBox.cshtml文件(使用Razor)
    • 在新建的EidtorComboBox.cshtml里定义一个ComboBox
      • 该ComboBox的事件可以写在Grid所在页面的JS
  2. 在Grid的相应列的属性配置中加上.EditorTemplateName("EidtorComboBox")
  3. 一定要定义Grid的Editable(editable => editable.Mode(GridEditMode.InCell))    
  4. 还要定义Grid的.DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Batch(true)
                                    .ServerOperation(false)
                                    .Model(model =>
                                        {
                                           model.Id(p => p.ID);
                                        })

                                    .Read(read => read.Action("Functininsignia", "Home"))
                                )
  5. 运行页面,点击设置EditorTemplateName的列,即可看见定义的ComboBox



    <span style="color:#3333FF;"><strong><span style="font-size:18px;">//页面Grid代码</span></strong></span>
    @(Html.Kendo().Grid<ViewModel>()
                                .Name("editGrid")
                                .AutoBind(true)
                                .Selectable()
                                .Sortable()
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .Batch(true)
                                    .ServerOperation(false)
                                    <strong><span style="color:#FF0000;">.Model(model =>
                                        {
                                           model.Id(p => p.ID);
                                        })</span></strong>
                                    .Read(read => read.Action("Functininsignia", "Home"))
                                )
                                <strong><span style="color:#FF0000;">.Editable(editable => editable.Mode(GridEditMode.InCell))</span></strong>
                                .Scrollable()
                                .Columns(columns =>
                                {
                                   columns.Bound(grid=> grid.Name).Title(@Model.Name).Sortable(true)
                                      .HtmlAttributes(new { style = "width:100px;" })
                                      .HeaderHtmlAttributes(new { style = "width:100px" });
                                   columns.Bound(grid=> grid.Edit).Title(@Model.Group).Sortable(false)
                                      <strong><span style="color:#FF0000;">.EditorTemplateName("EidtorComboBox")</span></strong>
                                      .HtmlAttributes(new { style = "width:180px;" })
                                      .HeaderHtmlAttributes(new { style = "width:180px" });
                                   columns.Bound(grid=> grid.Empty).Title(" ").Sortable(false)
                                   .ClientTemplate("<input type='checkbox' #= Empty ? checked='checked' : '' # />");
                                     <strong><span style="color:#FF0000;">//该列显示为Checkbox并根据当前行Empty的值来判断是否勾选
                                     //在Kendo控件的模版中可以使用# #语法在模版中执行JS代码,例如IF……ELSE条件判断、FOR循环都可以
                                     //注意如果使用# #语法中需要定义颜色的话,最好使用颜色名称或者是用RGB(204,0,204)的形式
                       //使用十六进制的如:#CC00CC会出现错误(也可能是我写的方式不对吧)
                                    //使用Grid的外键列也可以实现编辑的时候呈现为ComboBox,不过目前不是很明白该怎么用,还望有好心人可以帮帮忙呢!</span></strong>
                                })
                        )
    
    
    
    <span style="font-size:18px;color:#3333FF;"><strong>//EidtorComboBox.cshtml</strong></span>
    @(Html.Kendo().ComboBox()
       .Name("cbo")
       .Filter("contains")
       .HtmlAttributes(new { style = "width:180px" })
       .Placeholder("Select fabric...")
       .DataTextField("Text")
       .DataValueField("Value")
       .DataSource(source =>
          {
             source.Read(read =>
             {
                read.Action("Insignia", "Home");
             });
          })
       .SelectedIndex(0)
    )
    
    
0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:33848次
    • 积分:1226
    • 等级:
    • 排名:千里之外
    • 原创:93篇
    • 转载:0篇
    • 译文:0篇
    • 评论:4条
    我喜欢的

    壹撇壹捺:弓長青爭

    アニメ:かいぞくおう

    Game:League of Legends