如何在Kendo Grid搜索/过滤时保留修改与选中状态？

问题根源 #

Kendo Grid默认在搜索/过滤时会基于原始数据源重新渲染视图，如果本地修改（行内编辑、下拉框变更）未同步到数据源，或者选中状态仅依赖DOM节点，就会出现修改丢失、选中状态消失的问题。我们需要把修改和选中状态直接绑定到数据源的dataItem上，确保过滤时基于已更新的数据渲染。

解决方案1：本地修改同步到数据源，避免搜索后丢失 #

所有行内编辑、下拉框变更的操作，必须通过Kendo Grid的dataItem.set()方法将修改写入数据源，而非仅修改DOM元素。

代码示例：

1. 行内编辑自动同步：Grid的save事件会自动将编辑内容同步到dataItem，确保开启编辑模式的save事件监听：

$("#grid").kendoGrid({
  editable: "inline", // 行内编辑模式
  save: function(e) {
    // e.model就是当前修改的dataItem，Kendo已自动完成同步
    // 若需额外校验或处理，可在此操作
    console.log("修改已同步到数据源:", e.model);
  },
  // 其他配置...
});

2. 自定义下拉框/控件的同步：如果是手动添加的编辑控件（比如模板里的下拉框），需要监听控件的change事件，手动更新对应dataItem：

// 假设下拉框在Grid的列模板中
$("#grid").on("change", ".custom-dropdown", function() {
  var $row = $(this).closest("tr");
  var grid = $("#grid").data("kendoGrid");
  var dataItem = grid.dataItem($row);
  // 将下拉框值同步到dataItem的对应字段
  dataItem.set("Category", $(this).val());
});

解决方案2：保留选中状态跨过滤操作 #

将选中状态存储到数据源每个dataItem的自定义字段（比如isSelected），通过行模板绑定选中样式，过滤后重新渲染时自动恢复选中状态。

代码示例：

1. 初始化数据源时添加选中状态字段：

// 原始数据
var gridData = [
  { ProductID: 1, ProductName: "Chai", Category: "Beverages" },
  { ProductID: 2, ProductName: "Chang", Category: "Beverages" },
  // 更多数据...
];

// 给每个数据项添加isSelected字段
gridData.forEach(item => {
  item.isSelected = false;
});

// 初始化数据源
var dataSource = new kendo.data.DataSource({
  data: gridData,
  schema: {
    model: {
      fields: {
        ProductID: { type: "number" },
        ProductName: { type: "string" },
        Category: { type: "string" },
        isSelected: { type: "boolean" } // 注册选中状态字段
      }
    }
  },
  // 其他配置...
});

2. 自定义行模板绑定选中样式：

<script id="rowTemplate" type="text/x-kendo-template">
  <tr class="#= isSelected ? 'k-state-selected' : '' #">
    <td>#= ProductID #</td>
    <td>#= ProductName #</td>
    <td>
      <select class="custom-dropdown">
        <option value="Beverages" #= Category === 'Beverages' ? 'selected' : '' #>Beverages</option>
        <option value="Food" #= Category === 'Food' ? 'selected' : '' #>Food</option>
      </select>
    </td>
  </tr>
</script>

3. 监听Grid的change事件更新选中状态：

$("#grid").kendoGrid({
  dataSource: dataSource,
  selectable: "multiple, row", // 开启多选
  rowTemplate: kendo.template($("#rowTemplate").html()),
  change: function(e) {
    var grid = this;
    var allDataItems = grid.dataItems();
    var selectedRows = grid.select();

    // 先重置所有项的选中状态
    allDataItems.forEach(item => {
      item.set("isSelected", false);
    });

    // 给选中行对应的dataItem设置选中状态
    selectedRows.forEach(row => {
      var dataItem = grid.dataItem(row);
      dataItem.set("isSelected", true);
    });
  },
  // 其他配置...
});

4. 搜索过滤逻辑基于已更新的数据源：
   搜索时直接操作数据源的filter方法，确保过滤基于已修改后的数据：

$("#searchInput").on("input", function() {
  var keyword = $(this).val().toLowerCase();
  var grid = $("#grid").data("kendoGrid");
  grid.dataSource.filter({
    logic: "or",
    filters: [
      { field: "ProductName", operator: "contains", value: keyword },
      { field: "Category", operator: "contains", value: keyword }
    ]
  });
});

核心要点 #

• 所有本地修改必须通过dataItem.set()同步到数据源，而非仅修改DOM
• 选中状态绑定到数据项的自定义字段，摆脱对DOM节点的依赖
• 搜索过滤直接操作数据源的filter，基于已更新的数据渲染视图

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