Category / Section
How to export TreeGrid with client-side data in Angular?
2 mins read
TreeGrid content can be exported either to PDF or to excel formats. In the toolbar click action event, convert the TreeGrid data source to string object and send it as new property to the TreeGrid model before calling the export method.
//app.component.html <ej-treegrid #TreeGridControl id="TreeGridControl" [toolbarSettings]="toolbarsettings" (toolbarClick)="toolbarclick($event)" //… > </ej-treegrid>
//app.component.ts export class AppComponent { public editsettings; public toolbarsettings; public constructor() { this.editsettings = { allowAdding: true, allowEditing: true, allowDeleting: true }; this.toolbarsettings = { showToolbar: true, toolbarItems: ['excelExport', 'pdfExport'] }; } @ViewChild('TreeGridControl') treegrid: EJComponents<any, any>; toolbarclick(args) { var treeObj = this.treegrid.widget; treeObj.model["exportData"] = JSON.stringify(treeObj.dataSource()); if (args.itemName == "Excel Export") { treeObj.exportGrid = treeObj["export"]; treeObj.exportGrid('http://localhost:50280/api/TreeGrid/ExcelExport', "", true); args.cancel = true; } else { treeObj.exportGrid = treeObj["export"]; treeObj.exportGrid('http://localhost:50280/api/TreeGrid/PdfExport', "", true); args.cancel = true; } }
On server-side deserialization method, convert the local data to object collection and use this data source for the exporting.
[AcceptVerbs("Post")] public void ExcelExport() { string gridProperty = HttpContext.Current.Request.Params["TreeGridModel"]; ExcelExport exp = new ExcelExport(); TreeGridProperties gridProp = this.ConvertGridObject(gridProperty); exp.Export(gridProp, (IEnumerable)exportData, "Export.xlsx", ExcelVersion.Excel2010, new TreeGridExportSettings() { Theme = ExportTheme.FlatSaffron }); } [AcceptVerbs("Post")] public void PdfExport() { string gridProperty = HttpContext.Current.Request.Params["TreeGridModel"]; PdfExport exp = new PdfExport(); TreeGridProperties gridProp = this.ConvertGridObject(gridProperty); exp.Export(gridProp, (IEnumerable)exportData, new TreeGridExportSettings() { Theme = ExportTheme.FlatSaffron }, "Export"); } public TreeGridProperties ConvertGridObject(string gridProperty) { JavaScriptSerializer serializer = new JavaScriptSerializer(); IEnumerable div = (IEnumerable)serializer.Deserialize(gridProperty, typeof(IEnumerable)); TreeGridProperties gridProp = new TreeGridProperties(); foreach (KeyValuePair<string, object> ds in div) { var property = gridProp.GetType().GetProperty(ds.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase); if (ds.Key == "exportData") { string str = Convert.ToString(ds.Value); exportData = JsonConvert.DeserializeObject<IEnumerable<HierachicalData>>(str); continue; } if (property != null) { Type type = property.PropertyType; string serialize = serializer.Serialize(ds.Value); object value = serializer.Deserialize(serialize, type); property.SetValue(gridProp, value, null); } } return gridProp; }
A sample to export TreeGrid with client-side data is available here