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(自定义列的编辑控件)

转自:http://blog.falafel.com/custom-editors-with-kendo-grid/ The Kendo UI Grid makes it easy to displ...
  • lxl743p
  • lxl743p
  • 2015年12月16日 14:45
  • 2696

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 ...

KendoUi控件kendoGrid中template中条件判断的使用

根据dataSource中提供的值渲染出来的页面效果如下: 最后一列的操作,根据是否已经处理来显示“回收”的操作按钮。 相关代码如下,主要是template中使用条件判断语句的方式: var...

JQuery Kendo UI使用技巧总结

总结项目开发中使用Kendo UI的使用技巧与一些问题解决之道
  • jia20003
  • jia20003
  • 2013年08月30日 23:57
  • 24747

ASP.NET MVC 4中使用Kendo UI

http://blog.csdn.net/kingcruel/article/details/9996159 一、 1、建立一个ASP.NET MVC 4专案       使用NuGet...
  • DJ2008
  • DJ2008
  • 2015年04月27日 18:09
  • 1878

Telerik Kendo UI 那点事【2】中文化(汉化)

CSDN上有一个引路蜂软件的博客,里面有kendo ui的一般用法。它那里讲过的我这里就不再继续重复。 由于框架设计的需要,后台使用spring,前台使用kendo ui构建页面。为了加快快发速度以...

KendoUI模板引擎 - #号语法

KendoUI的模板引擎使用的语法叫做”#号语法(Hash Syntax)”,主要用来完成两件事情:渲染数据和执行JS表达式。...
  • hwhsong
  • hwhsong
  • 2016年07月14日 12:06
  • 1677

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

总结在MVC项目中Kendo控件的使用!

Kendo UI Grid示例下载

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

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

1,首先定义好后台数据,返回一组json数据 @RequestMapping("/showUsers.do") @ResponseBody public Map userList( ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MVC kendo Grid EditorTemplate
举报原因:
原因补充:

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