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

Multiple Grid Export : Combine grids to same header row

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



3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team April 22, 2019 01:14 PM UTC

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. 


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

Regards, 
Thavasianand S. 



AF afiqdoherty May 2, 2019 04:32 AM UTC

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


PS Pavithra Subramaniyam Syncfusion Team May 8, 2019 08:53 AM UTC

 
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. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


Loader.
Live Chat Icon For mobile
Up arrow icon