MVC kendo Grid EditorTemplate

原创 2015年07月09日 14:45:43

最近在使用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)
    )
    
    
版权声明:本文为博主原创文章,未经博主允许不得转载。

Custom Editors with Kendo Grid(自定义列的编辑控件)

The Kendo UI Grid makes it easy to display and edit your data in a tabular format.  By default, the ...
  • chelen_jak
  • chelen_jak
  • 2014年08月02日 16:36
  • 9547

前台kendo ui js grid框架增删改查

1,首先定义好后台数据,返回一组json数据 @RequestMapping("/showUsers.do") @ResponseBody public Map userList( ...
  • qq_23313625
  • qq_23313625
  • 2016年12月27日 22:53
  • 1681

Telerik Kendo UI 那点事【3】GridView MVVM前后台联动服务端分页、分组、过滤(查询)、排序

中文化之后,我们开始具体使用kendo ui组件。经常开发系统的我,通常从最常用的控件用起,那就是表格控件GridView!现在的软件系统基本上就是标签框、文本框、选择框、树、表格堆砌而成。因此接触任...
  • supperman_009
  • supperman_009
  • 2014年09月25日 18:43
  • 10843

MVC Kendo总结之-----> Grid

总结在MVC项目中Kendo控件的使用!
  • u013028110
  • u013028110
  • 2015年09月17日 17:44
  • 1872

Kendo UI Grid示例下载

  • 2014年05月09日 15:45
  • 5KB
  • 下载

Kendo Grid 行样式(根据条件改变行颜色)

方法一:HTML页面,初始化时设置 //isgen == 1 红色(颜色) $("#gridMaster").kendoSmartGrid({ ...
  • chelen_jak
  • chelen_jak
  • 2017年04月26日 15:18
  • 1907

Kendo ui Grid的创建步骤

原文出处:http://blog.csdn.net/ibigpig/article/details/25631261     Kendo UI Dataviz 中的Grid控件不仅可以显示数据,...
  • chelen_jak
  • chelen_jak
  • 2016年12月20日 15:11
  • 965

Kendo UI Grid 外部实现过滤

kendo UI相关资料太少,查了好久才做出这个功能
  • A156348933
  • A156348933
  • 2017年11月29日 14:41
  • 143

封装扩展Kendo UI Grid

为了项目开发需要,封装Kendo UI Grid使用方法,提高js重用性
  • kdf123
  • kdf123
  • 2017年04月20日 23:43
  • 768

Kendo UI Grid结合Window完善Custom事件

今天来总结一下Grid控件的使用,在数据源绑定到Grid上后,我们肯定希望能对其进行编辑和删除,这里记录一下自己对于编辑的心得使用; 在asp.net mvc环境下做的 首先我们定义一个需要绑定数据实...
  • ly210501076
  • ly210501076
  • 2013年08月16日 15:28
  • 7416
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MVC kendo Grid EditorTemplate
举报原因:
原因补充:

(最多只允许输入30个字)