custom true type font error in Grid's PDF export [from CDN's links]

[jan kowalski]

Hi Syncfusion support .

In my scenario, I have a Razor Pages project and I want to use Vue Grid from direct CDN links. Unfortunately when defining my own TTF fonts when exporting to PDF, an error is thrown as in the screenshot. I attach a simple example with comments based on your examples from the Documentation. Could you take a look at this problem, please?
Thanks

Attachment: SyncGridPdf_af1f53fc.rar

[Rajapandiyan Settu]

Hi jan, 

Greetings from syncfusion support. 

We have achieved exporting a Grid into PDF with custom TTF font in the below sample. Please refer the sample and documentation for more information. 

 

Sample : https://codesandbox.io/s/vue-template-v96ig 

 

UG : https://ej2.syncfusion.com/vue/documentation/grid/pdf-export/#add-custom-font-for-pdf-exporting 

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rajapandiyan S 

[jan kowalski]

Hi Rajapandiyan.

Thanks for the answer, but it looks like you haven't opened the attached project :( I obviously know your documentation and the example itself. My situation is completely different. My project is RAZOR PAGES (Asp.Net Core) with links to your CDN resources. So I have:
<script src = "https://cdn.syncfusion.com/ej2/ej2-vue-es5/dist/ej2-vue.min.js" type = "text / javascript"> </script>

but with this file only, I can't define custom TTF, so I attach:

<script src = "http://cdn.syncfusion.com/ej2/ej2-pdf-export/dist/global/ej2-pdf-export.min.js" type = "text / javascript"> </script>

Now I can define fonts but the error shown in the previous entry is generated.
If I would like to use the reference to Grid (ES5) then I don't have to put this second script and everything works fine.

[Rajapandiyan Settu]

Hi jan, 

We are able to reproduce the reported issue in the given sample. Currently we are validating that in our source side and will update the further details on May 18^th 2020. 

Until then we appreciate your patience. 

Regards, 

Rajapandiyan S 

[jan kowalski]

OK, thank you very much :)

[Rajapandiyan Settu]

Hi jan, 

Thanks for your patience. 

We checked the provided sample and found  that “ej2-pdf-export” module is not included in “ej2-vue-es5” package and corresponding CDN link. We considered this bug as “PDF Export module missing in ej2-vue-es5 package and CDN”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will resolve this bug with our Volume 2, 2020 release scheduled at the end of June. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

Feedback: https://www.syncfusion.com/feedback/14603/pdf-export-module-missing-in-ej2-vue-es5-package-and-cdn 

Regards, 

Rajapandiyan S

[jan kowalski]

Welcome back.

Thank you for the fix regarding the user's TTF. It works great now. However, I'm afraid there is another problem. Please, read the comments in the code.

I want to change the font color and size in some cells in a PDF document. All my attempts were unsuccessful, and I also noticed a strange behavior with automatic font conversion to TimesRoman when I try to set the font height to something other than that defined in the Theme.

Could you tell me how to do it the right way?

Result:

[Sujith Kumar Rajkumar]

Hi Jan, 

 

We are glad to hear that. 

 

As for your other query, the fontColor property is used for setting the color directly in the excel export properties. For achieving this in the pdfQueryCellInfo event you need to use the textBrushColor property as demonstrated in the below code snippet, 

 

pdfQueryCellInfo(args) { 

        if (args.column.field === 'CustomerID' && args.value === "VINET") { 

            args.style = { textBrushColor: '#0000FF' }; 

        } 

} 

 

You can find the list of style properties that can be set in the pdfQueryCellInfo event handler from the following link, 

 

API link: https://ej2.syncfusion.com/vue/documentation/api/grid/pdfStyle/#properties 

 

This is the same for the pdfHeaderQueryCellInfo event also and the issue you have reported here on using the condition, we suspect is because of using aargs instead of args in the pdfHeaderQueryCellInfo event handler(Based on the provided code snippet). So can you please ensure this from your end and lets us know if still problem still persists. 

 

If we misunderstood your query please get back to us. 

 

Regards, 

Sujith R 

[jan kowalski]

Hi.
You are absolutely right. My fault with 'aargs' and 'fontColor / textBrushColor' [my fatigue and rush :( ]. However, the problem still exists. I'll point it out. My main need is to enlarge the font.
1. In 'pdfHeaderQueryCellInfo' textBrushColor and fontSize do not work at all, both when using user fonts and without specifying them in the Theme
2. Changing the font size in 'pdfQueryCellInfo' causes the font to be changed to 'TimesRoman'. I expect it will still be 'Advent Pro' which I specified in Theme. 'fontSize' works, i.e. the font is enlarged. If the changed cells have non-English characters [in my case it is Polish] then the following error is generated.



Please run the attached project and then the 'PDF Export' command from the 'Vue Grid' toolbar => Error. Delete Polish characters from 'es5-datasource.js' => PDF with enlarged font, but 'TimesRoman'
The most important thing for me is the possibility of enlarging the font in a PDF document.
If I can, I have an additional question about Excel, since we mentioned it.
3. Is it possible to set the row height in the exported workbook?
Thanks for all the help so far.

Attachment: SyncGridPdf_a44ccde3.rar

[Rajapandiyan Settu]

Hi jan, 

Thanks for your patience. 

Query #1: In 'pdfHeaderQueryCellInfo' textBrushColor and fontSize do not work at all, both when using user fonts and without specifying them in the Theme  

 

We have confirmed that the reported behavior is an issue from our side and logged a bug for same as “provide support to customize the column header style through pdfheaderquerycellinfo”. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release June 17th 2020. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

FB Link: https://www.syncfusion.com/feedback/16023/provide-support-to-customize-the-column-header-style-through 

Query #2: 'fontSize' works, i.e. the font is enlarged. If the changed cells have non-English characters [in my case it is Polish] then the following error is generated.  

 

Currently we are validating this query at our end and we will update the further details on or before July 15^th 2020. Until then we appreciate your patience. 

Query #3: Is it possible to set the row height in the exported workbook? 

 

yes, you are able to set row height for exported pdfGrid. You can achieve your requirement by using the pdfQueryCellInfo and pdfHeaderQueryCellInfo event. Refer the below code example. 

pdfHeaderQueryCellInfo(args) { 

                (args.cell.row).pdfGrid.headers.rows[0].height = 40; 

            }, 

pdfQueryCellInfo(args) { 

                 

                for (var i = 0; i < (args.cell.row).pdfGrid.rows.rowCollection.length; i++) { 

                    (args.cell.row).pdfGrid.rows.rowCollection[i].height = 40;   //set your height here 

                } 

            }, 

  

Regards, 

Rajapandiyan S

[jan kowalski]

Hello Rajapandiyan S.
Thank you very much for your commitment to fix the problem.
Regarding question # 3:
that's exactly how I set the row height in the PDF document, but this time I asked about ExcelExport. I can't find anywhere how to get to the workbook instance [as with pdfQueryCellInfo and pdfGrid in it]

[Rajapandiyan Settu]

Hi jan, 

Thanks for your update. 

Query #2: 'fontSize' works, i.e. the font is enlarged. If the changed cells have non-English characters [in my case it is Polish] then the following error is generated.  

 

You can change the custom font size in particular PDF cell by using following code. 

if (args.column.field == 'CustomerID' && args.value.startsWith('H')) { 

// get the particular cell and change the font 

                    args.cell.row.gridCells.cells[1].style.font = new ej.pdfexport.PdfTrueTypeFont(window.adventProFont, 8) // set the font here 8-font size 

                    args.style = { backgroundColor: '#99ffcc' }; 

                } 

Query #3: Is it possible to set the row height in the exported workbook? 

 

We don’t have the support to customize the rowHeight from default in excelRow while exporting a Grid. 

The default height is set to all the excelrows while exporting a Grid. Since this is the behavior of EJ2 Grid. 

 

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S 

[jan kowalski]

Hello Rajapandiyan S.
I've tried to define a new font before but in 'args.style' and it didn't work. I am glad that there is such a possibility in 'gridCells'. I missed it earlier.
Regarding 'ExcelExport', the inability to set 'rowHeight' is not a big deal. The end user will be able to do this directly in Excel. However, I preferred to make sure that this is the case.
Thank you very much for your support.

[Rajapandiyan Settu]

Hi jan, 

Thanks for your update. 

Query : I've tried to define a new font before but in 'args.style' and it didn't work. I am glad that there is such a possibility in 'gridCells'. 

 

we are glad that the previous solution resolved your requirement. Please get  back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S 

[Rajapandiyan Settu]

Hi jan, 

Thanks for your patience. 

Query #1: In 'pdfHeaderQueryCellInfo' textBrushColor and fontSize do not work at all, both when using user fonts and without specifying them in the Theme  

 

We have already provided a bug task for the above query as “provide support to customize the column header style through pdfheaderquerycellinfo”.  Since your requirement is not feasible at our end, so we have achieved your requirement by the below workaround. please find the below code example and sample for more information.  

pdfHeaderQueryCellInfo(args) { 

                    var backColor = this.$refs.grid_vue.$el.ej2_instances[0].pdfExportModule.hexToRgb('#ffff00'); 

                    args.cell.style.textBrush.color = new ej.pdfexport.PdfColor(0, 255, 255); 

// get the particular cell and customize the formatting as you want 

                    args.cell.gridRow.cells.getCell(1).style.font = new ej.pdfexport.PdfTrueTypeFont(window.adventProFont, 7) 

                    args.cell.gridRow.cells.getCell(1).style.backgroundBrush = new ej.pdfexport.PdfSolidBrush(new ej.pdfexport.PdfColor(backColor.r, backColor.g, backColor.b)); 

            } 

 

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S