Special character in grouped data header is not exported correctly

1 Answer 72 Views
Excel Export
Krishna
Top achievements
Rank 1
Krishna asked on 28 Jan 2022, 04:00 PM
Hello,

We are using kendo react excel export in our project
One of the header in grouped header column looks like "Arsenal & Arsenal". But when we export we are getting header as "Arsenal & Arsenal".
"&" is replaced with "&"
Is this the issue from telerik side?

Thank you

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 31 Jan 2022, 07:39 AM

Hi Krishna,

Thank you for contacting us.

Without a sample that replicates the issue, one thing that I could suggest is to try changing the font on PDF export as documented in the following help article:

Please give this a try and let us know if adding a font that supports unicode characters resolves the issue. If the problem persists, please try to isolate it in stackblitz, so we can debug it locally.

Looking forward to your reply.

 

Best Regards,
Konstantin Dikov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Krishna
Top achievements
Rank 1
commented on 31 Jan 2022, 11:05 AM

Hey Konstantin,

My question is for ExcelExport.  We are using ExcelExport component from kendo-react-excel-export. Do you think the answer you suggested will work for Excel as well

Best Regards,
Krishna
Konstantin Dikov
Telerik team
commented on 01 Feb 2022, 12:53 PM

Please excuse me for sending the wrong information.

In the context of excel export, the data that will be exported will be the data from the data items as is, which means that if you are storing the & symbol as "&", that`s what will be added to the exported file. With that in mind, you can replace "&" in the string value before passing the data. 

If further assistance is needed, please isolate the issue is stackblitz, so we can test and debug it locally.

Krishna
Top achievements
Rank 1
commented on 01 Feb 2022, 02:20 PM

Hello Konstantin,

I am able to replicate issue. Here is the stackblitz link
https://stackblitz.com/edit/react-ugsqbb?file=app/main.jsx

I have hard coded the "&" symbol and it's still exporting as "&"

Best Regards,
Krishna
Konstantin Dikov
Telerik team
commented on 01 Feb 2022, 04:52 PM

Hello Krishna,

Thank you for creating an example demonstrating the issue.

After long debugging and going through the source code I have noticed that the issue is with compiling of the templates, which encodes special characters. I will have to discuss this further with the developers team, but for now you can try the following workaround, where the cells value is manually changed before saving:

  const save = (component) => {
    const options = component.current.workbookOptions();
    const rows = options.sheets[0].rows;
    let altIdx = 0;
    rows.forEach((row) => {
      if (row.type === 'group-header') {
        row.cells.forEach((cell) => {
          var elem = document.createElement('textarea');
          elem.innerHTML = cell.value;
          cell.value = elem.value;
        });
      }
    });
    component.current.save(options);
  };

  const excelExport = () => {
    if (_exporter.current) {
      save(_exporter);
    }
  };

Krishna
Top achievements
Rank 1
commented on 02 Feb 2022, 01:25 PM

Thank you Konstantin. That worked.
Tags
Excel Export
Asked by
Krishna
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or