Angular Hierarchical Grid Export to Excel Service
The Excel Exporter service can export data to excel from the IgxHierarchicalGrid. The data export functionality is encapsulated in the IgxExcelExporterService
class. To trigger the process, you need to invoke the IgxExcelExporterService
's export
method and pass the IgxHierarchicalGrid component as the first argument.
Angular Excel Exporter Example
Exporting Hierarchical Grid's Data
To start using the IgniteUI Excel Exporter first import the IgxExcelExporterService
in the app.module.ts file and add the service to the providers
array:
// app.module.ts
import { IgxExcelExporterService } from 'igniteui-angular';
// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
providers: [ IgxExcelExporterService ]
})
export class AppModule {}
Note
In v12.2.1 and later, the exporter services are provided in root, which means you no longer need to declare them in the AppModule providers.
To initiate an export process you may use the handler of a button in your component's template.
<igx-hierarchical-grid #hierarchicalGrid [data]="localData" [autoGenerate]="true"></igx-hierarchical-grid>
<button (click)="exportButtonHandler()">Export IgxHierarchicalGrid to Excel</button>
You may access the exporter service by defining an argument of type IgxExcelExporterService
in the component's constructor and the Angular framework will provide an instance of the service. To export some data in MS Excel format you need to invoke the exporter service's export
method and pass the IgxHierarchicalGrid component as first argument.
Here is the code which will execute the export process in the component's typescript file:
// component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
import { IgxHierarchicalGridComponent } from 'igniteui-angular';
@ViewChild('hierarchicalGrid') public hierarchicalGrid: IgxHierarchicalGridComponent;
constructor(private excelExportService: IgxExcelExporterService) {
}
public exportButtonHandler() {
this.excelExportService.export(this.hierarchicalGrid, new IgxExcelExporterOptions('ExportedDataFile'));
}
If all went well, you should see the IgxHierarchicalGrid component and a button under it. When pressing the button, it will trigger the export process and the browser will download a file named "ExportedDataFile.xlsx" which contains the data from the Hierarchical Grid component in MS Excel format.
Export All Data
There are some cases when you might be using remote operations like Paging and the Grid won't have access to all of its data. In these cases, we recommend using the Excel Export Service and pass the whole data collection, if available. Example:
public exportButtonHandler() {
this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}
Export Multi Column Headers Grid
It is now possible to export Hierarchical Grid with defined multi-column headers. All headers will be reflected in the exported excel file as they are displayed in the Hierarchical Grid. If you want to exclude the defined multi-column headers from the exported data you can set the exporter option ignoreMultiColumnHeaders to true
.
Note
The exported Hierarchical Grid will not be formatted as a table, since Excel tables do not support multiple row headers.
Export Grid with Frozen Column Headers
By default Excel Exporter service exports the grid with scrollable (unfrozen) column headers. There are scenarios in which you may want to freeze all headers on top of the exported excel file so they always stay in view as the user scrolls through the records. To achieve this you could set the exporter option freezeHeaders to true
.
public exportButtonHandler() {
const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile');
exporterOptions.freezeHeaders = true;
this.excelExportService.export(this.grid, exporterOptions);
}
Customizing the Exported Content
In the above examples the Excel Exporter service was exporting all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this you may hook to the columnExporting
and/or rowExporting
events which are fired respectively for each column and/or each row and cancel the respective event by setting the event argument object's cancel
property to true
.
The following example will exclude a column from the export if its header is "Age" and if its index is 1:
// component.ts
this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
if (args.header == 'Age' && args.columnIndex == 1) {
args.cancel = true;
}
});
this.excelExportService.export(this.hierarchicalGrid, new IgxExcelExporterOptions('ExportedDataFile'));
When you are exporting data from the Hierarchical Grid component, the export process takes in account features like row filtering and column hiding and exports only the data visible in the Hierarchical Grid. You can configure the exporter service to include filtered rows or hidden columns by setting properties on the IgxExcelExporterOptions
object.
Known Limitations
Limitation | Description |
---|---|
Hierarchy levels | The excel exporter service can create up to 8 levels of hierarchy. |
Max worksheet size | The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns. |
Exporting pinned columns | In the exported Excel file, the pinned columns will not be frozen but will be displayed in the same order as they appear in the grid. |
Cell Styling | The excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the Excel Library. |
API References
The Excel Exporter service has a few more APIs to explore, which are listed below.
Additional components that were used: