KendoGrid分页切换时保持选中状态问题求助

问题描述 #

在KendoGrid组件中，页面加载时通过预设的selectedProductIDs实现了对应数据行的选中，但存在以下问题：取消第一页某产品ID的选中状态后切换至第二页，返回第一页时该产品ID的选中状态会被恢复。需要实现仅保留用户主动选中的ID，确保选中状态跨分页及操作持久化。

问题根源 #

原代码在dataBound事件中每次页面绑定数据时，都会用初始的selectedProductIDs重新选中行，覆盖了用户手动取消选中的操作；同时虽然开启了persistSelection，但未正确配置数据源主键，也未同步更新选中ID集合。

解决步骤 #

• 移除dataBound中的手动选中逻辑：persistSelection属性会自动处理跨分页的选中状态持久化，无需手动循环执行选中操作。
• 配置数据源主键：为Grid的数据源指定schema.model.id为ProductID，这是persistSelection功能正常工作的核心前提。
• 初始化时一次性设置选中状态：使用Grid的setSelection方法在初始化完成后设置初始选中行，避免重复触发选中逻辑。
• 同步选中ID集合：在change事件中实时更新selectedProductIDs，使其与Grid实际选中的ID保持一致。

修改后的完整代码 #

// 预设初始选中ID
var selectedProductIDs = [1, 3];

// 配置数据源并指定主键
var dataSourceTEST = new kendo.data.DataSource({
  data: [/* 你的数据源数据 */],
  schema: {
    model: {
      id: "ProductID", // 必须设置主键，persistSelection依赖此属性
      fields: {
        ProductID: { type: "number" },
        ProductName: { type: "string" },
        UnitPrice: { type: "number" },
        UnitsInStock: { type: "number" },
        Discontinued: { type: "boolean" }
      }
    }
  },
  pageSize: 10
});

$("#grid").kendoGrid({
  dataSource: dataSourceTEST,
  pageable: true,
  persistSelection: true,
  sortable: true,
  selectable: "multiple, row", // 明确设置支持多行选中
  change: function(e) {
    // 实时同步选中ID到全局变量
    selectedProductIDs = this.selectedKeyNames();
    console.log("当前选中的产品ID: [" + selectedProductIDs.join(", ") + "]");
  },
  columns: [{
    selectable: true,
    width: "50px"
  },
  {
    field: "ProductName",
    title: "产品名称"
  },
  {
    field: "UnitPrice",
    title: "单价",
    format: "{0:c}"
  },
  {
    field: "UnitsInStock",
    title: "库存数量"
  },
  {
    field: "Discontinued",
    title: "是否停产"
  }
  ]
});

// 初始化完成后设置初始选中状态
var grid = $("#grid").data("kendoGrid");
grid.setSelection(grid.dataSource.view().filter(item => selectedProductIDs.includes(item.ProductID)));

关键说明 #

1. persistSelection的作用：开启该属性后，KendoGrid会自动在分页、排序、过滤等操作时保留选中状态，无需手动维护跨页选中逻辑。
2. setSelection方法：仅在初始化时执行一次，用于设置初始选中行，避免了原代码中dataBound事件重复选中的问题。
3. change事件同步：用户每次修改选中状态时，都会更新selectedProductIDs，确保该集合始终反映当前实际选中的ID。

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