CODEWITHSUNDEEP
angularkendo-uikendo-ui-angular2
GCirs
GCirs

Reputation: 104

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.

Upvotes: 1

Views: 1202

Answers (2)

GCirs
GCirs

Reputation: 104

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.

Upvotes: 1

codingbadger
codingbadger

Reputation: 43974

If you add the package @progress/kendo-angular-excel-export and amend your allData() function to:

public allData(): ExcelExportData {
   const result: ExcelExportData = {
       data: this.collection$.pipe(
      map(users => ({ data: users, total: users.length })).data
   };
   return result;
}

That should work

Upvotes: 0

Related Questions