Excel Export of grid - column widths + strip html from content

[Adam Toone]

Hi,

I have a couple of queries regarding excel export of the grid...

Firstly, Is there a way to autofit or at least set the column widths as they appear in an excel export?

Secondly, is there a way to strip out html from the cell content?

thanks

Adam Toone

[Praveenkumar Gajendiran]

Hi Adam, 

Greetings from Syncfusion support. 

Query1: “Firstly, Is there a way to autofit or at least set the column widths as they appear in an excel export?” 

Based on your requirement, you want to autofit the columns based on the header and content value in the exported file. In EJ2 Grid, we don’t have the support to autofit the columns when exporting the grid into a Pdf/ Excel file. The exported column’s width is applied based on the width provided in the Grid Columns Settings. Since this is the behavior of EJ2 Grid.  

  

Width: https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#width 

Query2: “Secondly, is there a way to strip out html from the cell content?”

Yes, You can strip out html tags from the cell content using replace() function in the Grid’s excelQueryCellInfo event(“Triggers before exporting each cell to Excel file. You can also customize the Excel cells”) as demonstrated in the below code example,

Code Example: 

// Grid’s excelQueryCellInfo event
function exportQueryCellInfo(args: ExcelQueryCellInfoEventArgs): any { 

  if (args.column.field === 'FirstName') { 

    args.value = (args.value as any).replace(/(<([^>]+)>)/gi, ''); //here we strip out html tags from the cell content using replace() function. 

  } 

} 

Sample: https://stackblitz.com/edit/3bygej?file=index.ts

API Link: https://ej2.syncfusion.com/javascript/documentation/api/grid#excelquerycellinfo

Please get back to us if you need further assistance. 

Regards,
Praveenkumar G 

[Adam Toone]

Hi,

Thanks for the reply.

Query 2 has been succesfully resolved, thanks. However, for query 1 the width of the columns is already set in the grid yet when exported expanded (as there are also 2 levels of child grid) all the columns show squashed up. Below shows the grid in the web page with the column widths as required and then the excel import.

I have even tried setting the args.column.width value in the exportQueryCellInfo function as above yet this takes no effect either.

Do ,you have any more advice on this?

Adam

[Praveenkumar Gajendiran]

Hi Adam,

We are glad to hear that your queries 2 have been resolved. Please find the response for your last updated query below, 

Query: “However, for query 1 the width of the columns is already set in the grid yet when exported expanded (as there are also 2 levels of child grid) all the columns show squashed up. Below shows the grid in the web page with the column widths as required and then the excel import.”

Based on your query, we prepared a hierarchy Grid sample with hierarchy Grid export feature and checked your reported issue, but we are not able to reproduce your reported issue at our end. Please check the below sample and excel exported file for your reference.

Sample: https://stackblitz.com/edit/zhirur?file=index.ts

Online Demo: https://ej2.syncfusion.com/demos/#/material/grid/master-details-export.html

Excel Exported File: https://www.syncfusion.com/downloads/support/forum/167842/ze/EXPORT~1-1952822146.zip 

Screenshot:


Still if you have facing the issue, please share us the below information that will be helpful to validate further on this, 

1. Complete grid rendering code.
2. Syncfusion package version used.
3. Let us know the replication procedure for reproducing the problem.
4. If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample. It would be helpful to identify your problem case better so that we can check and provide the solution based on that
5. Please elaborate on your reported problem.

Please get back to us with the requested details which will be helpful for us to validate the reported scenario at our end and provide the solution as early as possible 

Regards 

Praveenkumar G 

[Brian Matz]

Look at the Title column.  The width of the column is NOT large enough to accommodate the data!

[Rajapandi Ravi]

Hi Brain,

Thanks for your update

We have checked your shared information and we could see that the Title column was not large enough to accommodate the data. In excelQueryCellInfo event we have defined the wrapText style property as true then text content will wrap to the next line. Please refer the below code example and sample for more information.

 

excelQueryCellInfo: function(args) {

            args.style = { wrapText:true };

        },

 

Sample: https://stackblitz.com/edit/snx3pj?file=index.ts

API: https://ej2.syncfusion.com/documentation/api/grid/#excelquerycellinfo

Regards,

Rajapandi R

[Elzbieta]

Hi 

I have similar problem. Wraped text does not look good in the excel. Is three any chance to autofit to column content not to the column header? 

Kind regards 

Ela

[Rajapandi Ravi]

Hi Elzbieta,

Thanks for the update

Based on your requirement, you want to autofit the columns based on the content value in the exported file. In Excel Export, we don’t have the support to autofit the columns when exporting the grid into a Excel file. The exported column’s width is applied based on the width provided in the Grid Columns Settings. Since this is the behavior of EJ2 Grid.

Regards,

Rajapandi R