Articles in this section
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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied