DevExtreme嵌套Data Grid排序父表后孙子行意外折叠问题求助

原因 #

DevExtreme嵌套Data Grid中，一级子行的展开状态由父网格的expandedRowKeys控制，排序时父网格会自动保留这个状态；但孙子行所在的子网格是独立组件，父网格排序触发父行重新渲染时，子网格会被重置为初始状态，导致孙子行折叠。

解决方案 #

手动存储并恢复所有层级子网格的展开状态，具体步骤如下：

1. 定义状态存储对象 #

在组件类中声明一个对象，按父行ID存储对应子网格的展开行键：

childGridExpandedStates: { [parentRowId: number]: number[] } = {};

2. 绑定子网格的展开状态与事件 #

在父网格的子行模板中，为子网格绑定expandedRowKeys属性，并监听展开状态变化事件：

<dx-data-grid
  *dxTemplate="let rowData of 'rowDetail'"
  [dataSource]="rowData.children"
  [expandedRowKeys]="childGridExpandedStates[rowData.id] || []"
  (onExpandedRowKeysChanged)="updateChildGridExpandedState(rowData.id, $event.value)"
>
  <!-- 子网格列配置 -->
  <dxi-column dataField="id" caption="ID"></dxi-column>
  <!-- 其他列定义... -->
</dx-data-grid>

3. 保存子网格的展开状态 #

实现状态更新方法，将子网格的展开行键存入存储对象：

updateChildGridExpandedState(parentRowId: number, expandedKeys: number[]) {
  this.childGridExpandedStates[parentRowId] = expandedKeys;
}

4. 初始化默认展开状态（可选） #

如果需要初始化时展开所有孙子行，在组件初始化时遍历数据源填充初始状态：

ngOnInit() {
  // 假设父数据源为parentDataSource
  this.parentDataSource.forEach(parentRow => {
    if (parentRow.children?.length) {
      // 取出所有子行ID作为初始展开键
      this.childGridExpandedStates[parentRow.id] = parentRow.children.map(child => child.id);
    }
  });
}

这样处理后，父网格排序时，子网格会从存储对象中读取对应的展开状态，自动恢复孙子行的展开状态。

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