We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

TreeGrid Export To Excel

Is there a way to pass additional fields such as an Id, identifying the set of data the tree grid is displaying back to the controller when Exporting the grid ?


3 Replies

JS Jonesherine Stephen Syncfusion Team January 5, 2017 03:07 PM UTC

Hi Matthew, 
Thanks for contacting Syncfusion support. 
We have prepared the work around and included the taskID field in server side controller while exporting TreeGrid in excel. 
Please find the code example below: 
[controller] 
private TreeGridProperties ConvertTreeGridObject(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 (property != null) 
                { 
                    Type type = property.PropertyType; 
                    string serialize = serializer.Serialize(ds.Value); 
                    object value = serializer.Deserialize(serialize, type); 
                    property.SetValue(gridProp, value, null); 
                } 
            } 
            TreeGridColumn column = new TreeGridColumn(); 
            column.Field = "taskID"; 
            column.HeaderText = "taskID"; 
            gridProp.Columns.Add(column); 
            return gridProp; 
        } 
 
[view] 
@(Html.EJ().TreeGrid("container")              
             .Mappers(mp => mp.ExportToExcelAction("Treegrid/ExportToExcel")) 
             .Columns(co => 
             { 
                 co.Field("progress").HeaderText("Progress").Add(); 
                 co.Field("taskName").HeaderText("Task Name").Add(); 
                 co.Field("startDate").HeaderText("Start Date").Add(); 
                 co.Field("endDate").HeaderText("End Date").Add(); 
                 co.Field("duration").HeaderText("Duration").Add(); 
             })             
    )@(Html.EJ().ScriptManager()) 
We have also prepared the Tree Grid exporting sample in MVC. Please find the sample from below location 
Regards, 
Jone sherine P S 



MS Matthew Shakespeare January 5, 2017 04:24 PM UTC

Thanks for the reply Jonesherine but I'm using the pure javascript control 

I'm calling a web api service in the manor described here in the tree grid export demo, the web api service code i took from the mvc demo

it's strange that the help document Javascript/treegrid doens't have any information on it and the little information provided in the demo's doesn't show how to setup the web api service 

Here's a use case which should help you understand my issue, because it looks like you thought i wanted to add an additional column to the tree grid only visible on export

I'm creating an application that has 2 pages, the first page shows my user's a list of companies, when they select a company they navigate to the second web page.
The second web page shows them a tree grid of employee's within that company which they want to be able to export to excel

The grid calls the following web api method 

public void ExportToExcel(string TreeGridModel)
        {
            ExcelExport exp = new ExcelExport();
            // here the problem, sadly my data isn't hard coded in my controller. it's in a database accessed through entity framework
            // I need to know the company who's employee's i was displaying in the tree grid in-order to populate the grid with the right data
            var DataSource = this.GetEditingDataSource();
            TreeGridProperties obj = ConvertTreeGridObject(TreeGridModel);
            exp.Export(obj, DataSource, "Export.xlsx", ExcelVersion.Excel2010, new TreeGridExportSettings() { Theme = ExportTheme.FlatSaffron});
        }




JS Jonesherine Stephen Syncfusion Team January 6, 2017 05:21 PM UTC

Hi Matthew, 
Query1: I'm creating an application that has 2 pages, the first page shows my user's a list of companies, when they select a company they navigate to the second web page. 
The second web page shows them a tree grid of employee's within that company which they want to be able to export to excel 
Solution: 
We can pass additional parameter in TreeGrid model. We have prepared a separate web service and passed additional parameter while exporting TreeGrid. 
Please find the code example below: 
[client side]             
$("#count").ejNumericTextbox({ 
                maxValue: 7, 
                minValue: 1, 
            }); 
            $("#TreeGridContainer").ejTreeGrid({ 
                toolbarClick: toolbarclick, 
            }); 
        }); 
        function toolbarclick(args) { 
            this.exportGrid = this["export"]; 
            if (args.itemName.indexOf("Export") > -1) {  
              //Add the extra paramater to send to server 
             this.model["recordCount"] =  $("#count").ejNumericTextbox("model.value"); 
            } 
            if (args.itemName == "Excel Export") { 
                this.exportGrid('api/TreeGridExcelExport/ExcelExport', "", false); 
                args.cancel = true; 
            } 
        } 
     
[server side] 
   public int RecordCount { get; set; }       
    [AcceptVerbs("Post")] 
        public void ExcelExport() 
        { 
            string gridModel = HttpContext.Current.Request.Params["TreeGridModel"];           
            TreeGridProperties gridProperty = ConvertGridObject(gridModel); 
            ExcelExport exp = new ExcelExport(); 
            IEnumerable data = db.Table1.Take(RecordCount);    
            exp.Export(gridProperty,(IEnumerable)data, "ExcelExport.xlsx", ExcelVersion.Excel2010, new TreeGridExportSettings() { Theme = ExportTheme.FlatAzure });          
            
        } 
 
        private 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) 
            { 
                //Check and retrieve additional property here 
                if (ds.Key == "recordCount") 
                { 
                    if (ds.Value == null) 
                    { 
                        RecordCount = 7; 
                    } 
                    else 
                    { 
                        RecordCount = (int)ds.Value; 
                    } 
                    continue;                } 
                var property = gridProp.GetType().GetProperty(ds.Key, BindingFlags.Instance | BindingFlags.Public | BindingFlags.IgnoreCase); 
                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; 
        }      
    } 
} 
Query2: it's strange that the help document JavaScript/tree grid doesn’t have any information on it and the little information provided in the demo's doesn't show how to setup the web api service  
Solution: 
Currently we are enhancing our documentation. We will update you once we have refreshed our documentation 
Please find the sample from below location 
Disclaimer: We have removed bin and obj folder in the given sample for some security reasons, we must include necessary dlls to perform exporting in TreeGrid control which is available in Essential Studio installed location.    
Regards, 
Jone sherine P S 


Loader.
Up arrow icon