How to export multiple TreeGrids with remote data in Angular?
User can export multiple TreeGrid controls to PDF or excel files. To enable this support, the “allowMultipleExporting” property should be enabled. The exporting toolbar icons and “toolbarClick” action event will be enabled only for the TreeGrid which is displayed at first.
The server-side export method URL is passed to TreeGrid export method on toolbar click event. The TreeGrid models are sent as an array collection to the server-side.
//app.component.html <!--TreeGrid 1--> <ej-treegrid #TreeGridControl id="TreeGridControl" allowMultipleExporting = "true" (toolbarClick) = "toolbarclick($event)" [toolbarSettings]="toolbarsettings" //… > </ej-treegrid> <!--TreeGrid 2--> <ej-treegrid #TreeGrid2 id= "TreeGrid2" allowMultipleExporting = "true" //… [toolbarSettings]="toolbarsettings2" > </ej-treegrid>
//app.component.ts
export class AppComponent {
public toolbarsettings;
public toolbarsettings2;
public constructor(){
this.toolbarsettings = {
showToolbar: true,
toolbarItems: ['excelExport', 'pdfExport']
};
this.toolbarsettings2 = {
showToolbar: true,
toolbarItems: ['add', 'edit', 'delete', 'update', 'cancel',
'expandAll', 'collapseAll']
};
}
@ViewChild('TreeGridControl') treegrid : EJComponents<any, any>;
@ViewChild('TreeGrid2') treegrid2 : EJComponents<any, any>;
toolbarclick(args) {
var treeObj = this.treegrid.widget; // TreeGrid 1 instance
var treeObj2 = this.treegrid2.widget; // TreeGrid 2 instance
if(args.itemName == "Excel Export"){
treeObj.exportGrid = treeObj["export"];
//For Multiple export pass true
treeObj.exportGrid('http://localhost:50280/api/TreeGrid/ExcelExport', "", true);
args.cancel = true; // Cancel default event
}
else{
treeObj.exportGrid = treeObj["export"];
treeObj.exportGrid('http://localhost:50280/api/TreeGrid/PdfExport', "", true);
args.cancel = true;
}
In server-side export method, it calls and sends the required parameters to the multiple exporting overloading method.
For excel export, TreeGrid’s contents are converted to workbook format and append it to the next TreeGrid subsequently. Finally, pass the workbook to the last TreeGrid excel export overloading method to export consolidated view of all TreeGrid’s contents in single excel sheet.
Similarly, PDF export saves the content to PDF format with the overloading methods.
[AcceptVerbs("Post")]
public void ExcelExport()
{
string[] form = HttpContext.Current.Request.Form.GetValues("TreeGridModel");
ExcelExport exp = new ExcelExport();
IEnumerable<Table1> result1 = db.Table1.ToList();
IEnumerable<Table2> result2 = db.Table2.ToList();
IWorkbook workbook = null;
int count = 1;
foreach (string gridProperty in form)
{
TreeGridProperties gridProp = this.ConvertGridObject(gridProperty);
if (count == 1)
{
workbook = exp.Export(gridProp, (IEnumerable)result1, new TreeGridExportSettings() { Theme = ExportTheme.FlatAzure }, true, "TreeGrid Left");
}
else if (count == 2)
{
exp.Export(gridProp, (IEnumerable)result2, "ExcelExport.xlsx", ExcelVersion.Excel2010, new TreeGridExportSettings() { Theme = ExportTheme.FlatAzure }, workbook, false, "TreeGrid Right");
}
count++;
}
}
public void PdfExport()
{
string[] form = HttpContext.Current.Request.Form.GetValues("TreeGridModel");
PdfExport exp = new PdfExport();
PdfDocument document = null;
IEnumerable<Table1> result1 = db.Table1.ToList();
IEnumerable<Table2> result2 = db.Table2.ToList();
int count = 1;
foreach (string gridProperty in form)
{
TreeGridProperties gridProp = this.ConvertGridObject(gridProperty);
if (count == 1)
{
document = exp.Export(gridProp, (IEnumerable)result1, new TreeGridExportSettings() { Theme = ExportTheme.FlatAzure }, false, "TreeGrid Left");
}
else if (count == 2)
{
exp.Export(gridProp, (IEnumerable)result2, new TreeGridExportSettings() { Theme = ExportTheme.FlatAzure }, "Export", document, true, "TreeGrid Right");
}
count++;
}
}
A sample to export the multiple TreeGrids using remote data is available here
