Question

默认情况下，网格导出其当前数据。这意味着它仅导出表中显示的数据，而不导出所有数据。我已经阅读了文档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

我建议以下内容：-

使用可变状态存储当前过滤器和排序。
然后在数据更改时捕获网格数据结果。
然后，进程通过状态，但将页面大小设置为网格数据结果捕获的总记录。请参考下面的代码片段，该代码片段使用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;
    }
}

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

1 个答案: