1. Home
  2. Forum
  3. Angular - EJ 2
  4. PDF export cell text formatting and line break, spacing

PDF export cell text formatting and line break, spacing

Hey team, I'm exporting a grid table with custom cells, I'm using the method pdfHeaderQueryCellInfo(args: PdfHeaderQueryCellInfoEventArgs) to format the cells, this is what I'm trying to achieve (this is for a single cell value): 

Status: Hold
Duration: 2 years 8 months
Start Date: 2020-01-05
End Date: 2022-09-15 

This is for a single cell, however I cannot seem to achieve line breaking so some of the lines break and overlap and I'm getting this: 

Status: Hold  Duration:
2 years 8 months  Start
Date: 2020-01-05  End
Date: 2022-09-15

Right now I'm doing some spacing using \t , I tried using \n in args.value = str; but that has some weird behavior and seems to repeat, the outcome is this: 

Status Hold
uration: 2
: 2 years 8 months S
on: 2 years 8 months
Start Date: 2020-01-05E

I saw some other posts using VB and the way the fix that I saw was using (args.cell).html = str, but I the angular implementation doesn't have this field, also I saw someone using textBreak = true, but this is for the excelExport, this is my code for reference:

let str = '';
str += `Status: ${args.data.STATUS_NAME}\n`
str += `Duration: ${args.data.DURATION}\n`
str += `Start Date: ${args.data.START_DATE}\n`
str += `End Date: ${args.data.END_DATE}`;
args.value = str;

I hope you can help me with this, cheers.


Attachment: syncfusion_4d88d9da.zip

6 Replies 1 reply marked as answer
SK Sujith Kumar Rajkumar Syncfusion Team August 3, 2020 07:46 AM UTC

Hi Enrique, 

Greetings from Syncfusion support. 

We checked your reported query and before proceeding further can you please confirm us whether the single cell value for which you need to add line breaks is defined as a single value in the Grid data or are you trying to dynamically add other column data to this cell in the pdf’s queryCellInfo event. 

Based on the shared information we will update the further details. 

Regards, 
Sujith R30 


ES Enrique Scherer August 3, 2020 03:36 PM UTC

Hey Sujith thanks for the reply, as for your question the data is single value, so the gridDefinition is:
this.gridDefinition = {
  fields: [
    ...
    {field: 'START_DATE', header: 'Assignment Details', template: 'ProjectAssignment', width: 150},
    ...
  ]
  1. And the field of the data is:
    1. 0:
      1. START_DATE: "2020-01-05"

  4. This is how it is displayed: (screenshot attached)

  6. <ng-template let-data #ProjectAssignment>
      <div>
        <div>
          <span class="sp-text-caption">Status : </span>
          <div [class]="'rectangle-status--' + data.STATUS_NAME + ' rectangle-status'"></div>
          <span class="sp-text">{{ data.STATUS_NAME }}</span>
        </div>
        <div>
          <span class="sp-text-caption">Duration : </span>
          <span class="sp-text">{{ data.DURATION }}</span>
        </div>
        <div>
          <span class="sp-text">{{ data.START_DATE | date: 'MM/dd/yyyy' }}</span>
          <span class="sp-text"> - </span>
          <span class="sp-text">{{ data.END_DATE | date: 'MM/dd/yyyy' }}</span>
        </div>
      </div>
    </ng-template>
  7. So when I get the individual cell the actual value is a string which is  2020-01-05 in this case, and I dynamically change it's value to make it look as the template using args.value = str; which looks like this:

  8. let str = '';
    str += `Status: ${args.data.STATUS_NAME}\n`
    str += `Duration: ${args.data.DURATION}\n`
    str += `Start Date: ${args.data.START_DATE}\n`
    str += `End Date: ${args.data.END_DATE}`;
    args.value = str;

Attachment: Screen_Shot__351cd153.zip

SK Sujith Kumar Rajkumar Syncfusion Team August 4, 2020 11:56 AM UTC

Hi Enrique, 

Thanks for sharing the details. 

We are currently validating your query from our end and we will provide the further details by August 6th 2020. Until then your patience is appreciated. 

Let us know if you have any concerns. 

Regards, 
Sujith R 


SK Sujith Kumar Rajkumar Syncfusion Team August 6, 2020 12:28 PM UTC

Hi Enrique, 
 
Thanks for your patience. 
 
We were able to reproduce the reported problem – “Line break does not work properly in pdf export” from our end and have logged defect report for the same. 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 patch release scheduled on August 19th 2020. We appreciate your patience until then. 
 
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. 
 
 
Regards, 
Sujith R 


SK Sujith Kumar Rajkumar Syncfusion Team August 19, 2020 10:29 AM UTC

Hi Enrique, 
 
We have fixed this issue “Line break does not work properly in PdfGrid while exporting into EJ2 to PDF” internally. But due to our Volume 2 SP release works, we could not include the fix in our latest weekly patch release. So we will include the same in our weekly patch release scheduled to be rolled out during the first week of September 2020. We are sorry for the inconvenience caused and appreciate your patience until then. 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R 


SK Sujith Kumar Rajkumar Syncfusion Team August 26, 2020 06:54 AM UTC

Hi Enrique, 

We are glad to announce that our Essential Javascript2 patch release (v18.2.55) has been rolled out successfully and in that release we have added the fix for “Line break does not work properly in pdf export” issue. So please update your package to this version to include the fix. 

For adding line breaks in Grid column you need to use the break tag – ‘<br />’ and set the ‘disableHtmlEncode’ column property as false. And for adding line breaks in the exported pdf document, you need to use the new line tag – ‘\n’. So you can achieve your requirement by adding the ‘<br />’ tag in the Grid data for adding line breaks in the Grid columns and replacing the ’<br />’ in cell value to ‘\n’ on pdf export using the Grid’s pdfQueryCellInfo event handler(Triggers before exporting each cell to PDF document.). This is demonstrated in the below code snippets, 

Grid data: 
export let dateValidationData: Object[] = [ 
        { 
            CustomerID: 'VINET<br />New', 
            CustomerName: 'Maria', 
            Country: 'France' 
        }, 
        { 
            CustomerID: 'HANAR<br />New', 
            CustomerName: 'Antonio Moreno', 
            Country: 'Brazil' 
        } 
]; 

app.component.html 
<ejs-grid #grid [dataSource]='data' (pdfQueryCellInfo)='pdfQueryCellInfo($event)' [toolbar]='toolbar' (toolbarClick)='toolbarClick($event)' [allowPdfExport]='true'> 
    <e-columns> 
        <e-column field='CustomerID' [disableHtmlEncode]="false" width='150'></e-column> 
        <e-column field='CustomerName' width='250'></e-column> 
        <e-column field='Country' width='100'></e-column> 
    </e-columns> 
</ejs-grid> 

app.component.ts 
// Grid’s pdfQueryCellInfo event handler 
pdfQueryCellInfo(args) { 
        if (args.value.indexOf('<br />') !== -1) { 
            // Break tag in cell value is replaced by new line tag 
            args.value = args.value.replace('<br />', '\n'); 
        } 
} 

Please find the sample based on this for your reference below, 



We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Let us know if you have any concerns. 

Regards, 
Sujith R 


Marked as answer
Loader.
Up arrow icon