Kendo Grid自定义下拉列表选择时的确认弹窗及值设置问题

刚好之前做过类似的需求，给你一套完整的解决方案，核心是在下拉控件的change事件里处理确认逻辑，同时提前保存原始值，方便用户取消时恢复。

实现步骤 #

• 给Grid的下拉列指定自定义编辑器，这样我们能完全控制下拉控件的行为
• 在编辑器初始化时，把当前单元格的原始值存到下拉控件的配置里
• 绑定下拉控件的change事件，当用户选择不同选项时弹出确认框
• 根据用户选择，要么恢复原始值，要么保留新值并更新原始值记录

完整代码示例 #

<div id="grid"></div>

<script>
// 模拟业务数据源
var gridDataSource = new kendo.data.DataSource({
  data: [
    { id: 1, orderStatus: "已完成" },
    { id: 2, orderStatus: "处理中" },
    { id: 3, orderStatus: "待审核" }
  ],
  schema: {
    model: {
      id: "id",
      fields: {
        id: { editable: false },
        orderStatus: { type: "string" }
      }
    }
  }
});

// 自定义下拉编辑器函数
function statusDropDownEditor(container, options) {
  // 创建下拉控件并绑定数据源
  $('<input required data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
      dataSource: [
        { text: "待审核", value: "待审核" },
        { text: "处理中", value: "处理中" },
        { text: "已完成", value: "已完成" },
        { text: "已取消", value: "已取消" }
      ],
      // 处理下拉选项切换事件
      change: function(e) {
        const dropdown = this;
        const newValue = dropdown.value();
        const originalValue = dropdown.options.originalValue;

        // 只有当新值和原始值不同时才触发确认
        if (newValue !== originalValue) {
          if (!confirm("确定吗？")) {
            // 用户点击「否」，恢复原始值
            dropdown.value(originalValue);
          } else {
            // 用户点击「是」，更新原始值记录（避免后续切换时用旧值）
            dropdown.options.originalValue = newValue;
          }
        }
      }
    });

  // 初始化时保存当前单元格的原始值到下拉控件配置
  const dropdown = container.find("input").data("kendoDropDownList");
  dropdown.options.originalValue = options.model[options.field];
}

// 初始化Kendo Grid
$("#grid").kendoGrid({
  dataSource: gridDataSource,
  editable: "inline", // 行内编辑模式，弹窗编辑模式逻辑完全通用
  columns: [
    { field: "id", title: "订单ID", width: "100px" },
    { 
      field: "orderStatus", 
      title: "订单状态", 
      editor: statusDropDownEditor // 指定自定义编辑器
    },
    { command: "edit", title: "操作", width: "150px" }
  ]
});
</script>

关键细节说明 #

1. 原始值保存：我们把编辑前的初始值存在下拉控件的options.originalValue里，这样在change事件中能随时获取到
2. 确认逻辑触发：只有当新选中值和原始值不一致时才弹出确认框，避免无意义的弹窗
3. 值恢复机制：用户取消时，直接调用dropdown.value(originalValue)，Kendo的双向绑定会自动把值同步回Grid的数据源模型里
4. 原始值更新：用户确认新值后，要更新originalValue为当前新值，这样后续再次切换选项时，会以最新确认的值作为“原始值”对比

不管你用的是行内编辑、弹窗编辑还是单元格编辑模式，这个逻辑都能直接适配，只需要确保自定义编辑器正确绑定即可。

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