MVC kendo Grid EditorTemplate

最近在使用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循环都可以
                                    //注意如果使用#　#语法中需要定义颜色的话，最好使用颜色名称或者是用ＲＧＢ（２０４，０，２０４）的形式
   　　　　　　　　　　　　　　　　　　　//使用十六进制的如：#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)
   )