After updating from 17.4.41 to 19.1.69 pdfExport is not working

[Eduardo Moreno]

I'm working with these components

    "@syncfusion/ej2-angular-dropdowns": "^17.4.44",

    "@syncfusion/ej2-angular-grids": "^17.4.41",

    "@syncfusion/ej2-angular-navigations": "^17.3.34",

    "@syncfusion/ej2-angular-pivotview": "^17.4.41",

But after updating pivotview to a newer version, just to be able to show labels on top of bar charts, my grid export buttos stopped working and started to throw this error "cyclic object value", so i updated all the syncfusion libraries  to a newer version which is 19.1.69 because i'm working with 11.2.13 angular version.

After the update i'm getting this error  Type 'PdfTrueTypeFont' is not assignable to type 'PdfStandardFont | PdfTrueTypeFont'. in my function that generates the pdfExport properties, i'm creating a new PdfTrueTypeFont as in the documentation but is not working, below is the code for the pdfExportProperties.

  return {

            theme: {

                header: {

                     fontName: 'Calibri', fontSize: 6, bold: true,

                },

                record: {

                     fontName: 'Calibri', fontSize: 6, bold: false

                },

                caption: {

                     fontName: 'Calibri', fontSize: 6, bold: false

                }

            },

            header: {

                fromTop: 0,

                height: 80,

                contents: [

                    {

                        type: 'Text',

                        value: "Name",

                        position: { x: 250, y: 0 },

                        style: { textBrushColor: '#000000', fontSize: 23 },

                       font: new PdfTrueTypeFont(base64font, 12) ,

                    }

                ]

            },

            fileName: "pdfdocument.pdf",

            pageSize: 'Letter',

            hierarchyExportMode: 'Expanded',

            pageOrientation: 'Landscape',

        };

Attachment: TsFontErrors_5c34b951.rar

[Sujith Kumar Rajkumar]

Hi Eduardo, 

 

Greetings from Syncfusion support. 

 

We checked the reported problem but unfortunately were unable to reproduce it as providing custom font(using PdfTrueTypeFont) to the export header did not show any errors. You can check the below sample for reference, 

 

Sample: https://stackblitz.com/edit/angular-7cdoea?file=app.component.ts 

 

We suspect that you might be facing problem due to duplicate packages installed inside your application’s ‘@syncfusion’ package in the node modules folder. This might be invoking different package version files causing the reported problem. So please follow the steps provided below to overcome this, 

 

• Delete package.lock.json file from your application.  
• Remove the @syncfusion package folder from the node_modules.
• Use latest version or “*”(Installs the latest packages) for all Syncfusion components in package.json file.  
• Then install the NPM packages.

 

Once installed, clear the browser cache and try running the application and check if the problem is resolved. Also try opening it in other browsers. 

 

If problem still persists then please share us the following information to validate further on this, 

 

• Share us the Grid code file.
• Share us the package.json file of your application.
• If possible share us a simple sample to replicate the problem or try reproducing it in the above shared sample.

 

Regards, 

Sujith R 

[Eduardo Moreno]

Thanks, it worked, but there is an issue with grouping columns in data grid component, if my column has a blank space throws this error ERROR DOMException: Element.querySelector: '.e-groupdroparea div[ej-mappingname=Column name]' is not a valid selector. I downgraded to  18.4.47  ​where everything works

[Ajith Govarthan]

Hi Eduardo, 

Thanks for the update. 

Query: Thanks, it worked, but there is an issue with grouping columns in data grid component, if my column has a blank space throws this error ERROR DOMException: Element.querySelector: '.e-groupdroparea div[ej-mappingname=Column name]' is not a valid selector. I downgraded to  18.4.47  ​where everything works 

 

Based on your query you are facing issue with grouping in your Grid application. So, before we proceed to your query please share the below details to find the root cause of the issue. 

1. Share the complete Grid code example.

2. Please share the screenshot or video demonstration of the reported issue.

 

3. Please explain more details on the reported query” but there is an issue with grouping columns in data grid component, if my column has a blank space throws this error”.

 

4. Do you have any null values in the grouped column?

 

Regards, 

Ajith G.