如何从Kendo UI Grid导出筛选后的全部数据（而非仅当前页）？

我来帮你搞定这个问题，核心思路就是要拿到Grid当前的筛选（以及排序、分组等）状态，然后用process方法对原始数据做对应处理，这样导出的就是符合当前筛选条件的全部数据了，具体操作步骤如下：

1. 导入必要的依赖 #

在你的组件文件顶部，导入需要的工具和组件：

import { Component, ViewChild } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';
import { process } from '@progress/kendo-data-query';

2. 获取Grid实例 #

首先在HTML里给Grid添加一个模板引用变量，方便在组件里获取它的实例：

<kendo-grid #grid [data]="ciConfig" <!-- 保留你原有的其他Grid配置 --> >
  <kendo-grid-excel fileName="CustomerInfo_Configuration.xlsx" [fetchData]="allData"></kendo-grid-excel>
  <!-- 你的Grid列配置等内容 -->
</kendo-grid>

接着在组件类中通过ViewChild获取这个Grid实例：

@Component({
  // 你的组件元数据（选择器、模板路径等）
})
export class YourComponent {
  @ViewChild('grid') grid!: GridComponent;
  ciConfig: any[]; // 你的原始全量数据数组

  constructor() {
    this.allData = this.allData.bind(this);
  }

3. 修改allData方法处理筛选后的数据 #

现在更新你的allData方法，利用Grid的当前状态和process方法生成符合条件的数据集：

public allData(): ExcelExportData { 
  // 获取Grid当前的状态，包含筛选、排序、分组等用户操作后的条件
  const currentGridState = this.grid.state;
  // 用process方法对原始数据进行处理，得到符合当前状态的全部数据
  const filteredFullData = process(this.ciConfig, currentGridState).data;
  const result: ExcelExportData = { data: filteredFullData }; 
  return result; 
}

这样修改后，不管你对Grid做了筛选、排序还是分组操作，导出的都会是符合当前所有条件的全部数据，而不是仅当前分页内容或者原始全量数据。

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