Multiple Grid Export : Combine grids to same header row

[afiqdoherty]

Hi,

I've got a request from client to combine list of grids to only one header row. Currently, I use export to single sheet that combines multiple grid separated by 2 blanks row for each grid. Hope you can understand my requirements and help me to resolve this. please find below codes to export excel to single sheet.

<script>

    function onSelect(args) {

        

            var firstGrid = document.getElementById("List_Declaration_Info").ej2_instances[0];

            var secondGrid = document.getElementById("List_Invoice_Info").ej2_instances[0];

            var thirdGrid = document.getElementById("List_Vehicles_Info").ej2_instances[0];

            var fourthGrid = document.getElementById("List_Containers_Info").ej2_instances[0];

            var appendExcelExportProperties = {

                multipleExport: { type: 'AppendToSheet', blankRows: 2 }  <<<< need to combine, not separated

            };

            var GridExport = firstGrid.excelExport(appendExcelExportProperties, true);

            GridExport.then((fData) => {

                secondGrid.excelExport(appendExcelExportProperties, true, fData).then((fkData) => {

                    thirdGrid.excelExport(appendExcelExportProperties, true, fkData).then((fData) => {

                        fourthGrid.excelExport(appendExcelExportProperties, false, fData);

                    })

                });

            });

        }

</script>

hope you understand,

regards,

afiq

[Thavasianand Sankaranarayanan]

Hi Muhammad, 

Greetings from Syncfusion support. 

Based on your query we suspect that you want to export a multiple Grid dataSource in a single Grid in excel sheet. We can achieve your requirement by setting the dynamic dataSource to the excelExportProperties. 

 

Refer the below help documentation for further detail. 

Link: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/excel-exporting/#custom-data-source 

Please let us know if you need further assistance on this. 

Regards, 

Thavasianand S. 

[afiqdoherty]

Hi,

thank you for the reply. But, i cannot understand based on the solution/link given...

I think, we can manipulate the codes below to combine it as one row header. 

            var firstGrid = document.getElementById("List_Declaration_Info").ej2_instances[0];

            var secondGrid = document.getElementById("List_Invoice_Info").ej2_instances[0];

            var thirdGrid = document.getElementById("List_Vehicles_Info").ej2_instances[0];

            var fourthGrid = document.getElementById("List_Containers_Info").ej2_instances[0];

            var appendExcelExportProperties = {

                multipleExport: { type: 'AppendToSheet', blankRows: 2 }

            };

            var GridExport = firstGrid.excelExport(appendExcelExportProperties, true);

            GridExport.then((fData) => {

                secondGrid.excelExport(appendExcelExportProperties, true, fData).then((fkData) => {

                    thirdGrid.excelExport(appendExcelExportProperties, true, fkData).then((fData) => {

                        fourthGrid.excelExport(appendExcelExportProperties, false, fData);

                    })

                });

            });

to simplify, what i want is, firstGrid + secondGrid  + thirdGrid  + fourthGrid   = combine grid

[Pavithra Subramaniyam]

Hi Muhammad, 

 

We have validated your query and created a sample based on your requirement. Here, we have achieved your requirement by adding second grid columns to first grid and extending first grid dataSource then we export the grid. After completion of exporting, we have removed the added second grid columns from first one. Please find the below code example and sample for your reference. 

 

[code example] 

 

@Html.EJS().Grid("FirstGrid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowFiltering().AllowResizing(true).AllowExcelExport().ToolbarClick("toolbarClick").Toolbar(new List<string>() { "ExcelExport" }).Columns(col => 

{ 

    ... 

 

}).AllowPaging().ExcelExportComplete("complete").Render() 

 

@Html.EJS().Grid("SecondGrid").DataSource((IEnumerable<object>)ViewBag.DataSource1).AllowExcelExport().Columns(col => 

{ 

    ... 

 

}).AllowPaging().Render() 

 

 

<script> 

function toolbarClick(args) { 

        var cols = []; 

        var firstGrid = document.getElementById("FirstGrid").ej2_instances[0]; 

        var initCols = firstGrid.columns; 

        var initDataSource = firstGrid.dataSource; 

        var exportData = []; 

        var secondGrid = document.getElementById("SecondGrid").ej2_instances[0]; 

        for (var i = 0; i < firstGrid.columns.length; i++) { 

            cols.push(firstGrid.columns[i])     //adding first grid columns  

        } 

        for (var i = 0; i < secondGrid.columns.length; i++) { 

            cols.push(secondGrid.columns[i])   //adding second grid columns 

        } 

        firstGrid.columns = []; 

        firstGrid.columns = cols;              //assign new columns to first grid 

 

        if (args.item.id === 'FirstGrid_excelexport') { 

            var excelExportProperties = { 

                dataSource: ej.base.extend(exportData, firstGrid.dataSource, secondGrid.dataSource, true)    //extending grid dataSource 

            }; 

            firstGrid.excelExport(excelExportProperties); 

        } 

    } 

 

    function complete(args) {        

        var firstGrid = document.getElementById("FirstGrid").ej2_instances[0]; 

        var secondGrid = document.getElementById("SecondGrid").ej2_instances[0]; 

        for (var i = 0; i < firstGrid.columns.length; i++) 

        { 

            for (var j = 0; j < secondGrid.columns.length; j++) 

            { 

                if (firstGrid.columns[i] == secondGrid.columns[j]) 

                { 

                    firstGrid.columns.splice(i, 1);       //removing added columns from first grid 

                } 

            } 

        } 

        firstGrid.refreshColumns(); 

    } 

</script> 

 

Note: It will display all grid data as a single grid. 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2MVCExport1458821457  

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.