Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The grid have an option to export the hierarchy grid to excel document. By default, grid will exports the visible child grids in expanded state. you can change the exporting option by using the ExcelExportProperties.hierarchyExportMode property. The available options are,
| Mode | Behavior |
|---|---|
| Expanded | Exports the visible child grids in expanded state. |
| All | Exports the all the child grids in expanded state. |
| None | Exports the child grids in collapse state. |
import { Component, OnInit, ViewChild } from '@angular/core';
import { data, employeeData } from './datasource';
import { DetailRowService, GridModel, GridComponent, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='pData' height='265px' [allowExcelExport]='true' [childGrid]='childGrid'
[toolbar]='["ExcelExport"]' (toolbarClick)="toolbarClick($event)">
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
`,
providers: [DetailRowService]
})
export class AppComponent implements OnInit {
public pData: object[];
@ViewChild('grid') public grid: GridComponent;
public childGrid: GridModel = {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
};
ngOnInit(): void {
this.pData = employeeData;
}
toolbarClick(args: ClickEventArgs) {
if (args.item.id === 'Grid_excelexport') {
const exportProperties: ExcelExportProperties = {
hierarchyExportMode: 'Expanded'
};
this.grid.excelExport(exportProperties);
}
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService, FilterService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService, FilterService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);