Как экспортировать ВСЕ текущие данные из Kendo UI Grid?

Question

По умолчанию Grid экспортирует свои текущие данные.Это означает, что он экспортирует только те данные, которые показаны в таблице, а не все из них.Я прочитал документацию здесь , и мне удалось экспортировать все данные, но каждый раз, когда я фильтрую таблицу, все еще экспортируются все данные.Мой код:

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;
    }
}