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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Multiple Grid Export : Combine grids to same header row

Thread ID:

Created:

Updated:

Platform:

Replies:

144112 Apr 19,2019 02:52 AM UTC May 8,2019 08:53 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
afiqdoherty
Asked On April 19, 2019 02:52 AM UTC

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 [Syncfusion]
Replied On 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. 


afiqdoherty
Replied On 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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon