Telerik Kendo UI Grille Personnalisation Excel Export

Question

J'ai une grille d'UI Kendo pour Angular 2 qui peut avoir beaucoup de données. Par conséquent, j'utilise un appel d'API qui inclut un compte et place les données dans une grille paginée. Lorsque je clique sur le bouton Exporter vers Excel, il ne renvoie que les données affichées. J'aimerais pouvoir exporter l'intégralité du jeu de données à la place.

Je pense que je suis censé être en utilisant la méthode fetchData et inclus dans la grille comme suit:

<kendo-grid-excel fileName="MyExport.xlsx" [fetchData]="allResults"></kendo-grid-excel> 

Cependant, la méthode allResults doit renvoyer un objet ExcelExportData. Mon appel de méthode à l'API retourne une observable qui est ensuite analysée. J'ai essayé de retourner les données dans l'événement subscribe, mais cela me donne une erreur TypeScript que la méthode doit renvoyer une valeur. Si je change le type de retour à "any", il échoue sur mon appel à "this" lors de l'application externe des filtres.

Ceci est ma méthode de récupération en cours:

allResults(): ExcelExportData { 
    if (!this.sort.length) { 
     this.sort.push({ field: undefined, dir: undefined }); 
    } 

    this.myService.resultsGet(
     this.filters.date, 
     ... 
     undefined, // skip 
     undefined, // take 
     this.sort[0].field, 
     this.sort[0].dir 
    ).subscribe(
     (pagedList: any) => { 
      for (let item of pagedList.results) { 
       // manipulate a few things here 
      } 
      return { data: pagedList.results }; 
     }, 
     e => { console.log(`error: ${e}`); } 
    ); 
} 

Est-il possible de le mettre en place pour faire un appel API externe en utilisant des filtres de composants angulaires et renvoyer les données à travers une souscription?

Merci d'avance!

Answer 1

On dirait qu'il ya deux choses qui se passent:

• cette non définie: fetchData n'est pas appelé dans le contexte de votre instance de composant, de sorte que vous devez lier vous

  this.allResults = this.allResults.bind(this); 
  

• Valeur de retour: en supposant que votre service récupère à partir d'un serveur, vous devez renvoyer une promesse ou une observable pour récupérer Les données, de sorte que vous ne voulez pas abonner(), vous voulez carte ()

Mettre le tout ensemble, vous obtenez quelque chose comme ceci:

constructor(
    public myService: MyService 
    ) { 
    this.allResults = this.allResults.bind(this); 
    } 

    allResults() { 
    if (!this.sort.length) { 
     this.sort.push({ field: undefined, dir: undefined }); 
    } 

     this.myService.resultsGet(
     this.filters.date, 
     ... 
     0, // skip 
     undefined, // take 
     this.sort[0].field, 
     this.sort[0].dir 
    ).map(response => { 
     // manipulate a few things here 
     return <GridDataResult> { 
      data: response.value, 
      total: response.count 
     } 
    } 

Mise à jour: Voici un plunker qui montre cela, basé sur un des exemples de Telerik.

excel export plunker