Kendo MVC Grid行内编辑模式下无法使用ComboBox的问题

嘿，我仔细看了你的代码，发现问题出在编辑器模板（Editor Template）的使用方式上。你现在直接在Grid所在页面定义了ComboBox，然后想用EditorTemplateName("DepartmentComboBox")去引用它，但Kendo MVC的EditorTemplate机制可不是这么工作的，这就是为什么编辑时还是显示默认文本框的原因。

问题根源 #

EditorTemplateName参数对应的是编辑器模板文件的名称，而不是页面上已经渲染的控件ID/名称。Kendo MVC会自动去~/Views/Shared/EditorTemplates或者当前Controller对应的Views文件夹下的EditorTemplates目录里找同名的cshtml文件，找不到的话就会 fallback 到默认的文本编辑器。

解决步骤 #

1. 创建独立的编辑器模板文件

在你的项目中创建~/Views/Shared/EditorTemplates/DepartmentComboBox.cshtml文件，把ComboBox的代码放进去：

@model string
@(Html.Kendo().ComboBox()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName("")) // 保证控件名称与绑定字段一致
    .DataTextField("Text")
    .DataValueField("Value")
    .BindTo(new[]
    {
        new { Text = "Sales", Value = "Sales" },
        new { Text = "Marketing", Value = "Marketing" },
        new { Text = "Development", Value = "Development" },
        new { Text = "HR", Value = "HR" }
    })
    .HtmlAttributes(new { style = "width: 100%" })
    .Value(Model) // 绑定当前字段的已有值
)

注意：用ViewData.TemplateInfo.GetFullHtmlFieldName("")设置Name，能确保控件和Grid列绑定的Status字段正确关联，避免提交数据时出现匹配问题。

2. 修改Grid所在页面的代码

把原来页面里直接定义的DepartmentComboBox控件删掉，Grid的配置保持EditorTemplateName("DepartmentComboBox")不变即可。修正后的Grid核心代码如下：

<div id="datagrid">
    @(Html.Kendo().Grid<MVCSite.Model.ProspectSearchModel>()
        .Name("ProspectSourceGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Title("Id").Filterable(false).Visible(false);
            columns.Command(command => { command.Edit(); }).Width(200).Title("Change<br>Status").Width(100);
            columns.Bound(p => p.Status).EditorTemplateName("DepartmentComboBox").Title("Status").Width(100).Filterable(false);
            columns.Bound(p => p.DaysOnMarket).Title("Days On Market").Width(150).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).HtmlAttributes(new { style = "text-align: center" }).Filterable(false);
            columns.Bound(p => p.USState).Title("State").Width(100).HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).HtmlAttributes(new { style = "text-align: center" }).Filterable(false);
            columns.Bound(p => p.FormattedAddress).Title("Address").HeaderHtmlAttributes(new { style = "text-align: center; justify-content: center" }).Filterable(false);
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Selectable()
        .Pageable(pageable => pageable
            .Numeric(true)
            .Info(true)
            .PreviousNext(true)
            .Refresh(false)
            .PageSizes(true)
            .ButtonCount(50))
        .Sortable()
        .Selectable(s=> s.Mode(GridSelectionMode.Single))
        .Scrollable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                model.Id(p => p.Id);
                model.Field(p => p.DaysOnMarket).Editable(false);
                model.Field(p => p.USState).Editable(false);
                model.Field(p => p.FormattedAddress).Editable(false);
            })
            .Read(read => read.Action("ProspectSourceGridData", "DataSource"))
            .Destroy(update => update.Action("OptionGridInline_Destroy", "DataSource"))
            .Update(update => update.Action("EditingInline_Update", "Grid"))
            .PageSize(15))
        .Events(events => events.DataBound("Autocolumnwidth"))
    )
</div>

3. 验证基础配置

你的ProspectSearchModel里的Status字段是string类型，和ComboBox的Value类型（同样是string）完全匹配，这部分配置没问题，不需要修改。

为什么这样能行？ #

当Grid进入行内编辑模式时，Kendo MVC会自动加载DepartmentComboBox.cshtml模板文件，渲染成对应的ComboBox控件，并且通过模板里的Name设置和Value(Model)绑定，实现编辑时的正确显示和提交。

备注：内容来源于stack exchange，提问作者Jay