Search code examples
angularkendo-uikendo-ui-angular2

Asynchronous Excel Export in Angular KendoUI exports empty collection


I'm trying to get an asynchronous excel export working in one of our grids but I consistently get an empty xsls file with only the collection headers.

Data is properly being rendered in the grid, with filtering and pagination.

I've tried following the docs over here without success, here's my implementation:

Relevant parts in my component.ts:

@Input() collection$: Observable<User[]>;

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

allData(): Observable<GridDataResult> {
  return this.collection$.pipe(
    map(users => ({ data: users, total: users.length }))
  );
}

First thing I tried was to directly return this.collection$; but the behavior was the same: empty collection inside the excel file thus I tried returning an Observable<GridDataResult> instead with no success either.

Relevant parts in my component.html:

<kendo-grid
  [kendoGridBinding]="collection$ | async"
  pageSize="10"
  [pageable]="true"
  [filterable]="true"
>
  <ng-template kendoGridToolbarTemplate>
    <button type="button" kendoGridExcelCommand icon="file-excel">
      Export to Excel
    </button>
  </ng-template>

  <!-- columns -->

  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
  <kendo-pager-info></kendo-pager-info>
  <kendo-pager-next-buttons></kendo-pager-next-buttons>
  <kendo-pager-page-sizes [pageSizes]="[5, 10, 40]"></kendo-pager-page-sizes>
  <kendo-grid-excel
    fileName="Users.xlsx"
    [fetchData]="allData"
  ></kendo-grid-excel>
</kendo-grid>

Can anyone shed some light on this? Thanks in advance.


Solution

  • Apparently it is because of the rxjs version:

    https://github.com/telerik/kendo-angular/issues/1962

    Dropping rxjs and rxjs-compat to 6.2.2 fixed the issue.

    UPDATE

    Bumping to 6.4.0 also fixes the issue.