fetchRemoteData for excel exporting

[Daniel]

 

Hi,

I have a grid that fetches paged data from a remote data source. I have implemented a new directive, remoteGridDataBinding , that extends the GridDataBindingDirective to handle this and it works great. This directive implements the fetchRemoteData function which encapsulates all the logic required to retrieve the data from my remote service. 

<kendo-grid remoteGridDataBinding dataQuery="dataQuery"...

 

I'm now looking to implement the Export to Excel functionality. I understand that I can use the fetchData binding on the kendo-grid-excel component. I can then pass this an observable containing all the data. 

<kendo-grid-excel [fileName]="export.fileName" [fetchData]="getAllData"></kendo-grid-excel>

 

Is there anyway my getAllData function can make use of the fetchRemoteData function within my new databinding directive? 

Otherwise I would need to implement the logic for retrieving the grid's data twice. This may not seem like too much overhead initially but our application has a number of grids that would need to implement this functionality. It would be a cleaner if we could implement the remote data source call once (within a reusable directive), and then reuse this logic when I need to fetch all the grid's data before an export to excel.

 

Thanks,

Daniel

[Svet]

Hi Daniel,

What could be done is to access the ExcelComponent from within the custom directive and pass a function to its fetchData property:

@Directive({
  selector: "[productsBinding]"
})
export class ProductsBindingDirective extends DataBindingDirective
  implements OnInit, OnDestroy {
  @ContentChild(ExcelComponent) private excel: ExcelComponent;
  private serviceSubscription: Subscription;

  constructor(private products: ProductsService, grid: GridComponent) {
    super(grid);
  }

  public ngOnInit(): void {
    this.serviceSubscription = this.products.subscribe(result => {
      this.grid.loading = false;
      this.grid.data = result;
      this.notifyDataChange();
    });

    super.ngOnInit();

    this.rebind();
  }

  ngAfterContentInit() {
    this.excel.fetchData = this.getAllData;
  }

  public ngOnDestroy(): void {
    if (this.serviceSubscription) {
      this.serviceSubscription.unsubscribe();
    }

    super.ngOnDestroy();
  }

  public rebind(): void {
    this.grid.loading = true;

    this.products.query(this.state);
  }

  private getAllData = () => this.products.fetch("Products", {});
}

Here is an example:

https://stackblitz.com/edit/angular-z41qvu-txicdk?file=app%2Fremote-binding.directive.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik