Export to PDF with Nested Grid

[Lory]

Hi Team,

I have a nested grid that could be exported to PDF as shown https://www.syncfusion.com/kb/4487/how-to-export-grid-to-word-excel-and-pdf-in-javascript

I have no problem exporting the grid if I'm just showing the main/parent grid but once I expand a child grid then click on Export to PDF toolbar, it displays produces an error in ConvertGridObject method. MissingMethodException. An exception of type 'System.MissingMethodException' occurred in System.Web.Extension.dll. Additional information: No parameterless constructor defined for the type of 'Sustem.String'.

property = {Syncfusion.JavaScript.Models.GridProperties ChildGrid}

property.PropertyType = {Name = "GridProperties" FullName = "Syncfusion.JavaScript.Models.GridProperties"}

How to resolve this error? I want to export all of the information in the nested grid to PDF. Thanks

[Seeni Sakthi Kumar Seeni Raj]

Hi Lory, 

We are unable to reproduce the issue while exporting the Grid after expanding the ChildGrid in the latest Essential Studio v14.1.0.46. But in the older v13.2.0.39, we are able to reproduce the issue. If you are using v13.2.0.39 and facing the serialization problem while exporting after expanding the ChildGrid, you can add childGrid to ignoreOnExport array in the load event of Grid. Refer to the following code example. 

<div id="Grid"></div> 

 

<script type="text/javascript"> 

    var employeeView = @Html.Raw(Json.Encode(ViewBag.empData)); 

    var OrdersView = @Html.Raw(Json.Encode(ViewBag.orders)); 

 

    $(function () { 

        $("#Grid").ejGrid({ 

            dataSource: employeeView, 

            allowPaging: true, 

             . . ..  

            load: function (args) { 

                this.addIgnoreOnExport("childGrid"); 

            }, 

           . . . . 

            childGrid: { 

        . . . . . 

            } 

        }); 

    }); 

</script> 

Also, let us know whether you would like to export the childGrid along with the parent Grid? 

If you are still facing same issue, please provide the following information to analyze the issue and provide you solution. 

1)      Essential Studio Version? 

2)      Code example of Grid as well as the code behind. 

Regards, 

Seeni Sakthi Kumar S. 

[Lory]

I am using an older version. ej.web.all.min.js version 13.2.0.29 and I would like to export the childGrid along with the parentGrid. Sample code below is just one among the many nested grid that will have export to pdf feature. Please also consider some of the nested grids have multiple child grids.

[Javascript]

    $("#parentGrid").ejGrid({

        dataSource: parentSrc,

        query: new ej.Query().addParams("CompanyId", getCompanyId),

        allowPaging: false,

        allowSorting: true,

        allowTextWrap: true,

        allowFiltering: true,

        enableTouch: false,

        toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.ExcelExport, ej.Grid.ToolBarItems.PdfExport ] },

        columns: [

           /*columns*/

        ],

        childGrid: {

            dataSource: window.ordersView,

            queryString: "EmployeeID",

            allowPaging: false,

            columns: [

                        /*columns*/

            ],

           

            load: function (args) {

                var proxy = this;

                this.model.query = new ej.Query();

                $.ajax({

                    url: "../Sample/GetDetail?&detailId=" + window.DetailID,

                    dataType: "json",

                    success: function (e) {

                        proxy.dataSource(e);

                    }

                });

            }

        },

        detailsExpand: function (args) {

            this.option("model.childGrid.dataSource", window.ordersView);

        },      

        toolbarClick: function (e) {

            this.exportGrid = this["export"];

            if (e.itemName == "Excel Export") {

                this.exportGrid('../Sample/ExcelExport')

                e.cancel = true;

            }           

            else if (e.itemName == "PDF Export") {

                this.exportGrid('../Sample/PDFExport')

                e.cancel = true;

            }

        },

    });

[Controller]

//PDFExport method gets data to pass to PdfDocumentExport

        [AcceptVerbs("POST")]

        public void PdfDocumentExport(IEnumerable Data, PdfDocument document, string fileName, string headerText = "", bool isAutoFit = true)

        {

            string gridModel = System.Web.HttpContext.Current.Request.Params["GridModel"];

            GridProperties gridProperty = ConvertGridObject(gridModel);

            PdfExport exp = new PdfExport();

            exp.Export(gridProperty, Data, fileName + ".pdf", false, false, "gradient-azure", false, false, document, headerText, isAutoFit);

        }

 //Grid Model conversion Method.

        private GridProperties ConvertGridObject(string gridProperty)

        {

            JavaScriptSerializer serializer = new JavaScriptSerializer();

            IEnumerable div = (IEnumerable)serializer.Deserialize(gridProperty, typeof(IEnumerable));

            GridProperties gridProp = new GridProperties();

            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);

                    }               

            }

            return gridProp;

        }

[Seeni Sakthi Kumar Seeni Raj]

Hi Lory, 

We don’t have support to export the Hierarchy Grid. We have already logged a Feature request for “Exporting Hierarchy Grid” and it can be implemented in any of our upcoming releases. But you can export the childGrid explicitly by including the export toolbarItem (“pdfExport” or ej.Grid.ToolBarItems.PdfExport) in the toolbarItems (of toolbarSettings) for the childGrid as shown in the following code example. 

    <div id="Grid"></div> 

    <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                 . . . . 

                      . .. 

                childGrid: { 

                    dataSource: dataManger, 

                    queryString: "EmployeeID", 

                    toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.PdfExport] }, 

                    toolbarClick: function (e) { 

                        if (e.itemName == "PDF Export") { 

                            this.exportGrid('/Home/ExportPdf') 

                            e.cancel = true; 

                        } 

                    }, 

                } 

            }); 

        }); 

    </script> 

Regards, 

Seeni Sakthi Kumar S.