Aynchronous Excel Export

[JOSE]

Hello,

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:

01.@Input() collection$: Observable<User[]>;
02.
03.ngOnInit() {
04.  this.allData = this.allData.bind(this);
05.}
06.
07.allData(): Observable<GridDataResult> {
08.  return this.collection$.pipe(
09.    map(users => ({ data: users, total: users.length }))
10.  );
11.}

 

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:

01.<kendo-grid
02.  [kendoGridBinding]="users$ | async"
03.  pageSize="10"
04.  [pageable]="true"
05.  [filterable]="true"
06.>
07.  <ng-template kendoGridToolbarTemplate>
08.    <button type="button" kendoGridExcelCommand icon="file-excel">
09.      Export to Excel
10.    </button>
11.  </ng-template>
12.
13.  <!-- columns -->
14.
15.  <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
16.  <kendo-pager-info></kendo-pager-info>
17.  <kendo-pager-next-buttons></kendo-pager-next-buttons>
18.  <kendo-pager-page-sizes [pageSizes]="[5, 10, 40]"></kendo-pager-page-sizes>
19.  <kendo-grid-excel
20.    fileName="Users.xlsx"
21.    [fetchData]="allData"
22.  ></kendo-grid-excel>
23.</kendo-grid>

 

Thanks in advance.

[Dimiter Topalov]

Hi Jose,

Can you share more details about the data flow? I tried to adjust the asynchronous example from the linked documentation section such that the Grid data Observable is coming via an @Input() from a parent component, and it seems to be working as expected:

https://stackblitz.com/edit/angular-ng1mz7-qsh2rf?file=app%2Fapp.component.ts

Please compare it to your implementation and apply the necessary adjustments. Also make sure that the data is available here:

return this.collection$.pipe(
   tap(data => console.log(data)), // for example

   map(users => ({ data: users, total: users.length }))

  );

I hope this helps, but if I am missing something, or the issue persists, please send us an isolated runnable project, similar to the one above where the problem can be observed, so we can inspect it further, and determine what might be causing the problem. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[JOSE]

Hello Dimiter,

Thank you for your response, unfortunately I can't share your forked Stackblitz, I believe it has something to do with our corporate proxy. 

Here are the complete files if you don't mind copy&pasting them:

app.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { UsersService } from './users.service';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
      <my-grid [collection]="collection$"></my-grid>
    `,
    providers: [UsersService]
})
export class AppComponent implements OnInit {
  collection$: Observable<any>;

  constructor(private service: UsersService) { }

  ngOnInit() {
    this.collection$ = this.service.getAllUsers();
  }
}


@Component({
  selector: 'my-grid',
  template: `
       <kendo-grid [data]="collection | async">
        <ng-template kendoGridToolbarTemplate>
            <button type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>
        </ng-template>
        <kendo-grid-column field="name" width="100"></kendo-grid-column>
        <kendo-grid-excel fileName="Users.xlsx" [fetchData]="allData"></kendo-grid-excel>
      </kendo-grid>
    `
})
export class MyGridComponent {
  @Input() public collection: Observable<any>;


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

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

 

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
import { AppComponent, MyGridComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, GridModule, ExcelModule, HttpClientModule ],
  declarations: [ AppComponent, MyGridComponent ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

 

users.mock.ts

const data: any = {
  data: [
    {
      name: 'Bob'
    },
    {
      name: 'Alice'
    },
  ],
};

export class Users {
  public all() {
    return data;
  }
}

 

users.service.ts

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Users } from './users.mock';


@Injectable()
export class UsersService {
  mockClass: Users;

  getAllUsers(): Observable<any> {
    this.mockClass = new Users();

    return of(this.mockClass.all().data);
  }
}

 

Also, I don't have any data logged if I tap inside the pipe in the allData method.

 

Thank you again.

[Dimiter Topalov]

Hi Jose,

The setup seems correct, however the discussed issue might be caused by the version of RxJS:

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

Can you please try any of the solutions, outlined in the GitHub post above, and let me know whether the problem is resolved?

Regards,
Dimiter Topalov
Progress Telerik

[JOSE]

Changing the rxjs and rxjs-compat versions fixed the issue. 

Thank you.