This is a migrated thread and some comments may be shown as answers.

fetchRemoteData for excel exporting

1 Answer 82 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 02 Feb 2021, 05:34 PM

 

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

1 Answer, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 04 Feb 2021, 11:01 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Answers by
Svet
Telerik team
Share this question
or