最近在使用Kendo控件做项目,使用MVC开发模式,在使用Grid控件的使用需要用到EditorTemplate来实现某一列在编辑的时候呈现为ComboBox,看官网API很自然就想到要用EditorTemplateName来实现,看到EditorTemplateName以为跟其他的使用模版的地方一样,在JS里定义一个Kendo的模版,然后把名字写上就行了,但事实是不行的,这个EditorTemplateName的使用跟别模版不一样?如下:
- 要使用EditorTemplateName,首先要定义EditorTemplate,而定义这个EditorTemplate的位置是有要求的:
- 在项目的Views-->Shared文件夹下新建一个名为EditorTemplates的文件夹
- 然后在该文件夹下新建EidtorComboBox.cshtml文件(使用Razor)
- 在新建的EidtorComboBox.cshtml里定义一个ComboBox
- 该ComboBox的事件可以写在Grid所在页面的JS中
- 该ComboBox的事件可以写在Grid所在页面的JS中
- 在Grid的相应列的属性配置中加上.EditorTemplateName("EidtorComboBox")
- 一定要定义Grid的Editable(editable => editable.Mode(GridEditMode.InCell))
- 还要定义Grid的.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.ID);
})
.Read(read => read.Action("Functininsignia", "Home"))
)
- 运行页面,点击设置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) )