Kendo Grid Excel Export Issue

[Charles]

Is there a way to use the Grid Excel Export button outside of the toolbar template?

[Hetali]

Hello Charles,

We have a dedicated article that demonstrates how to trigger the export externally using saveAsExcel method. Following is the step by step method:

1. Import the Excel module in the 'app.module.ts' file

import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';

2. Add the ExcelComponent in the Grid and assign a Template Reference Variable to the Grid:

<kendo-grid #grid="kendoGrid" [data]="gridData" [height]="410">
  <kendo-grid-excel fileName="Products.xlsx"></kendo-grid-excel>
</kendo-grid>

3. Add a button outside the Grid

<button kendoButton (click)="exportToExcel(grid)">Export to Excel</button>

4. Use saveAsExcel method to export the Grid.

public exportToExcel(grid: GridComponent): void {
  grid.saveAsExcel();
}

StackBlitz example demonstrating the steps.

I hope this helps. Please let me know if you have any further questions pertaining to the Excel Export of the Kendo UI Grid.

Regards,
Hetali
Progress Telerik

[Prasant]

Hello,

    With above answer i.e. grid.saveAsExcel(); we are able to save only current page. But my requirement is to save all pages. 

     I am sure, this question is asked earlier and Progress Telerik team should have a solution.

I am using angular9 and Telerik Kendo UI Grid. We are getting Data in the format of JSON and binding to the Telerik kendo UI grid. Everything is working great with Kendo UI Grid  as per demonstrated on Kendo UI help page.

Note: - We triggering the export to excel Externally.

Appreciate

Your help and suggestion.

 

[Hetali]

Hi Prasant,

To save all the pages when you trigger the export to Excel externally, use the fetchData function in the ExcelComponent as seen in this article to Export Specific data. For example:

<kendo-grid-excel fileName="Products.xlsx" [fetchData]="allData">
</kendo-grid-excel>

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

public allData(): ExcelExportData {
  const result: ExcelExportData = process(customers, {});
  return result;
}

In this StackBlitz example, the Excel Export is triggered externally and all the pages of the Grid are exported.

Let me know if this helps or if you have any further questions.

Regards,
Hetali
Progress Telerik

[Prasant]

Works great. Thank You.