Kendo Grid下拉框仅点击显示，如何设置始终展示所有行下拉框？

问题背景 #

现有一个名为BulkParcelStatusUpdateGrid的Kendo Grid，其中"New Status"列使用DropDownEditor.cshtml作为编辑器模板。当前网格仅在点击单元格时才会显示下拉框，且切换行编辑时已编辑的下拉框会恢复为文本状态，需要设置让所有行的下拉框始终渲染显示。

网格代码 #

@(Html.Kendo().Grid<TaxCertApp.ViewModels.ParcelBulkUpdateViewModel>()
    .Name("BulkParcelStatusUpdateGrid")
    .Columns(columns =>
    {
        columns.Bound(parcel => parcel.ParcelKey).Title("Parcel Key").Hidden(true);
        columns.Bound(parcel => parcel.LotNo).Title("Lot #").Width(50);
        columns.Bound(parcel => parcel.AssembledTaxDescription).Title("Tax Description").Width(140);
        columns.Bound(parcel => parcel.ParcelStatus).Title("Current Status").Width(140);
        columns.Bound(parcel => parcel.ParcelBulkStatusUpdate)
               .Title("New Status")
               .Width(150)
               .EditorTemplateName("DropDownEditor");

        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
                 .Ajax()
                 .Batch(true)
                 .ServerOperation(false)
                 .Events(events => events.Error("error_handler"))
                 .Model(model =>
                 {
                      model.Id(n => n.ParcelKey);
                      model.Field(n => n.LotNo).Editable(false);
                      model.Field(n => n.AssembledTaxDescription).Editable(false);
                      model.Field(n => n.ParcelStatus).Editable(false);
                      model.Field(n => n.ParcelBulkStatusUpdate).Editable(true);
                 })
                 .PageSize(20)
                 .Read(read => { read.Action("GetDetailedParcelDetails", "Parcel").Data("{ CaseKey: " + @Model.CaseKey + "}"); }))
        )

编辑器模板代码 #

@(Html.Kendo().DropDownList()
    .BindTo(ViewBag.ParcelStatusList)
    .Name("NewParcelStatus")
    .DataTextField("Text")
    .DataValueField("Value")
  )

解决方法 #

要实现所有行始终显示下拉框，需放弃Kendo Grid默认的单元格编辑模式，改用模板列直接渲染下拉框，同时绑定数据源字段实现双向同步，具体步骤如下：

1. 修改网格列定义
   将原Bound列改为Template列，直接在模板中渲染下拉框，确保每个下拉框名称唯一并绑定对应行的字段值：

   columns.Template(@<text>
       @(Html.Kendo().DropDownList()
           .BindTo(ViewBag.ParcelStatusList)
           .Name("ParcelBulkStatusUpdate_" + item.ParcelKey) // 拼接行ID保证名称唯一
           .DataTextField("Text")
           .DataValueField("Value")
           .Value(item.ParcelBulkStatusUpdate) // 绑定当前行的字段值
           .Events(e => e.Change("onStatusChange")) // 绑定变更事件同步数据源
       )
   </text>).Title("New Status").Width(150);
   

2. 添加变更事件同步数据源
   手动监听下拉框变更事件，将选中值同步到Grid的数据源中：

   function onStatusChange(e) {
       var dropdown = e.sender;
       var row = dropdown.element.closest("tr");
       var grid = $("#BulkParcelStatusUpdateGrid").data("kendoGrid");
       var dataItem = grid.dataItem(row);
       // 更新数据源对应字段
       dataItem.set("ParcelBulkStatusUpdate", dropdown.value());
   }
   

3. 调整编辑配置（可选）
   由于不再依赖Grid内置编辑模式，可移除.Editable(editable => editable.Mode(GridEditMode.InCell))配置，避免逻辑混淆。

关键说明 #

• Kendo Grid的InCell编辑模式仅在单元格激活时渲染编辑器，编辑完成后恢复文本显示，这是默认设计特性，无法通过配置修改。
• 必须保证每个下拉框的Name属性唯一，否则会出现DOM元素冲突，导致切换行时下拉框异常消失。
• 通过dataItem.set()方法更新数据源，能确保Grid数据源与UI状态同步，批量保存时可正常提交所有修改值。

内容的提问来源于stack exchange，提问作者Jonathan Small