Gantt PDF Export Taskbar Text Alignment

[Jesse Williams]

I am attempting to export the Gantt to a PDF, but I cannot get the taskbar text to properly align. No matter what settings I update, the text seems to always render to the left of the taskbar (see attachment).

Is there any way to align the text so that it appears inside the taskbar on a PDF export?

Thanks

Attachment: taskbarTextAlignment_8557e2b2.zip

[Ajithkumar Gopalakrishnan]

Hi Jesse,

Greetings from Syncfusion Support,

To achieve your requirement, we suggest using the taskLabel in the Gantt Chart. This property is used to display the label inside the taskbar. After exporting to PDF, the label will still be inside the taskbar. We have attached a code snippet and a sample for your reference.

this.labelSettings = {

     taskLabel: 'TaskName'

};

Sample link: https://stackblitz.com/edit/angular-1bgav7?file=src%2Fapp.component.ts

If you have any specific concerns or encounter issues, please provide additional details or share a sample that replicates the problem. We are here to assist you further.

Regards,

Ajithkumar G

[Jesse Williams]

After a bit of testing, I uncovered what appears to be a bug. My settings already included the above `taskLabel`. I narrowed the issue down to the data I was using, specifically the value within the `taskLabel` field.

When my `taskLabel` field starts with a number, i.e. "1 Label", "2 Label", etc, it causes the text to render outside the taskbar when the PDF is generated. It renders correctly in the web UI, so the issue appears to be isolated to the PDF generation.

[Jesse Williams]

Actually it seems the issue occurs any time the first character within the `taskLabel` value is not a letter.

[Sridharan Jayabalan]

Jesse,

 

We have reviewed your query, and we are able to replicate the issue that you’ve reported that task label render outside the taskbar.

 

To address the problem, we have logged a bug request, and the fix will be provided in the patch release which is scheduled to be rolled out on February 28, 2024. You can track its status from the feedback link given below.

 

Feedback Link: Task label render outside the taskbar in Angular | Feedback Portal (syncfusion.com)

 

Note: Kindly login into your account and view the feedback.

  

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization

 

 

Regards,

Sridharan

[Sridharan Jayabalan]

Jesse,

 

Sorry for the inconvenience caused.

 

We have fixed the issue internally for the issue "Task label render outside the taskbar for alpha-numeric names" and please find the custom patch below.

 

Custom Patch - https://www.syncfusion.com/downloads/support/directtrac/general/ze/syncfusion-ej2-gantt-24.2.8_1-2034641995.zip

 

How to use the patch:

1. Extract the .zip folder, you will find tgz file of gantt
2. Extract it. You will receive a .tar file within.
3. Extract the .tar file. There will be a folder named package within.
4. Copy the contents of this folder.
5. In the node modules folder of your application, go to @syncfusion -> ej2-gantt.
6. Replace the contents of this folder with the gantt copied files.

 

Note: We will include the fix in the next patch release which is scheduled to be rolled out on "March 6, 2024"

 

 

Regards,

Sridharan

[Sridharan Jayabalan]

Jesse,

 

We appreciate your patience.

 

The reported issue occurred when we skip certain conditions upon PDF export now the fix for the issue “Task label render outside the taskbar in Angular | Feedback Portal (syncfusion.com)” has been rolled out in our latest patch release (v24.2.9). So upgrade to our latest version to resolve the problem.

 

Release notes - Essential Studio for EJ2 TypeScript Weekly Nuget Release Release Notes (syncfusion.com)

Sample Link - Xuzpit (forked) - StackBlitz

 

Please get back to us if you need any further assistance.

  

 

Regards,

Sridharan