如何从 Kendo UI Grid 导出所有当前数据？

Question

默认情况下，Grid 会导出其当前数据。这意味着它仅导出表中显示的数据，而不是全部数据。我已阅读文档here 并设法导出所有数据，但每次过滤表时仍会导出所有数据。 我的代码：

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

public allData(): ExcelExportData {
const result: ExcelExportData = {
  data: this.ciConfig
};
return result;

HTML：

<kendo-grid-excel fileName="CustomerInfo_Configuration.xlsx" [fetchData]="allData"></kendo-grid-excel>

我认为我需要使用文档中所示的“process()”来设置“this.ciConfig”中的当前总数，但我无法弄清楚。

任何帮助如何导出所有数据（不仅仅是显示的页面）？

Answer 1

我建议如下：-

• 使用变量状态来存储当前的过滤器和排序。
• 然后在数据更改时捕获网格数据结果。
• 然后在进程中传递状态，但将页面大小设置为网格数据结果捕获的总记录。 请参考下面的 sn-p 使用 State、GridDataResult 和 process() 在网格中导出。

import { Component } from '@angular/core';
import { process, State } from '@progress/kendo-data-query';
import { sampleProducts } from './products';
import { ExcelExportData } from '@progress/kendo-angular-excel-export';

import {
    GridComponent,
    GridDataResult,
    DataStateChangeEvent
} from '@progress/kendo-angular-grid';

@Component({
    selector: 'my-app',
    template: `
    <kendo-grid
        [data]="gridData"
        [pageSize]="state.take"
        [skip]="state.skip"
        [sort]="state.sort"
        [filter]="state.filter"
        [sortable]="true"
        [pageable]="true"
        filterable="menu"
        (dataStateChange)="dataStateChange($event)">
    <ng-template kendoGridToolbarTemplate>
                <button type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
    </ng-template>
    <kendo-grid-column field="ProductID" title="ID" width="40" [filterable]="false">
    </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Product Name">
    </kendo-grid-column>
    <kendo-grid-column field="FirstOrderedOn" title="First Ordered On" width="240" filter="date" format="{0:d}">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Unit Price" width="180" filter="numeric" format="{0:c}">
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" width="120" filter="boolean">
        <ng-template kendoGridCellTemplate let-dataItem>
            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-excel fileName="Products.xlsx" [fetchData]="allData"></kendo-grid-excel>
    </kendo-grid>
`
})
export class AppComponent {
    public state: State = {
        skip: 0,
        take: 5,
    };

    public gridData: GridDataResult = process(sampleProducts, this.state);

    public dataStateChange(state: DataStateChangeEvent): void {
        this.state = state;
        this.gridData = process(sampleProducts, this.state);
    }

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

    public allData(): ExcelExportData {
        var myState : State = this.state;
        myState.skip = 0;
        myState.take = this.gridData.total;
        const result: ExcelExportData =  {
            data: process(sampleProducts, this.state).data
        };
        return result;
    }
}