Can't show icon and on in both Angular grid and exported PDF grid

Question

Hi,We want to use Syncfusion Angular grid to show our data on Angular app and also we want to export the data keeping the design intact.Please have a look at the following image as the design reference. To test the Syncfusion Grid features, we create a sample app: https://stackblitz.com/edit/angular-jby2xg?file=app.component.ts But unfortunately, we couldn't show the icons in the grid cell.Also, the styles don't persist in the exported pdf, rather, the exported cels contain HTML codes! (Please follow the following screenshot of the exported pdf). Can you please help us to resolve our requirements?Please note that we want the grid to look like the first attached image in both the Angular app and in the exported PDF(red-down triangle icon for negative values, green-up triangle icon for positive values).

Sujith Kumar Rajkumar · Accepted Answer

Hi Shakir, 
 
Greetings from Syncfusion support. 
 
You can use the Grid’s column template or value accessor(as you have used) functionality to render custom content in the Grid cells and customize its style. However these custom content and styles will not be exported to pdf file. This is because the Grid pdf export draws value on the exported document from the Grid data source and so it does not export custom content(template, value accessor) by default. This is the default behavior of the Grid based on its current architecture. 
 
However you can export images/icons alone for the template columns by setting its corresponding base64 string to the value property of the pdfQueryCellInfo(Triggers for each cell before exporting to pdf) events as demonstrated in the below code snippet, 
 




// Grid’s pdfQueryCellInfo event handlers 
pdfQueryCellInfo(args) { 
   if (args.column.headerText === 'Employee Image') { 
            args.image = { base64: args.data["EmployeeImage"] }; 
    } 
} 
 
More details on this can be checked in the below online demo sample link, 
 
https://ej2.syncfusion.com/angular/demos/#/bootstrap5/grid/default-exporting 
 
Similarly for applying styles to the Grid cells on pdf export, you can use the same pdfQueryCellInfo event and apply required styles to the arguments style property. This requirement is logged in the below documentation link which you can check for more details, 
 
https://ej2.syncfusion.com/angular/documentation/grid/pdf-export/pdf-cell-style-customization/ 
 
So please check the above shared links and suggestions for customizing the Grid pdf exported document as per your requirement. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R