Exporting Gantt chart to PDF supports Traditional Chinese

[Wyatt Li]

1. May I inquire if the PDF export function supports Traditional Chinese? I encountered an error while executing it.
2. Is it possible to have a parameter list for users to choose from during PDF export, similar to Bryntum Gantt?
3. When using Virtual Scrolling, the row drag and drop functionality may become ineffective when there are a large number of items.
   

[Ajithkumar Gopalakrishnan]

Hi Wyatt,

Greetings from Syncfusion Support,

Query 1:  May I inquire if the PDF export function supports Traditional Chinese? I encountered an error while executing it.

We are able to replicate the problem at our end. By default, we do not have support for standard Chinese font in the EJ2 PDF library. But you can export (PDF) the different language text in Gantt chart using PdfTrueTypeFont. We have created a sample and achieved pdfExporting in the Gantt chart with Chinese fonts. To export custom font in the Gantt chart, we need to convert that custom fonts as base64 string and use it as PdfTrueTypeFont for the Gantt chart. please refer the below code example and sample for more information.

Ug link: https://ej2.syncfusion.com/vue/documentation/gantt/pdf-export/customize-pdf-export

import { adventProFont } from "./data";
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';

<ejs-gantt ref="gantt"

           id="GanttExport"

           …

          :toolbarClick="toolbarClick"

          

           :allowPdfExport="true"

          

           :locale="zh">

</ejs-gantt>

toolbarClick: function(args)

{ 

    if (args.item.id === "GanttExport_pdfexport")

    {

        var exportProperts: PdfExportProperties = {

        ganttStyle:

            {

            font: new PdfTrueTypeFont(adventProFont, 12)

         },

       };

       var ganttChart = document.getElementById('GanttExport').ej2_instances[0]; // Gantt chart id + _pdfexport

       ganttChart.pdfExport(exportProperts);

}

After pdf export image ref:

Query 2:  Is it possible to have a parameter list for users to choose from during PDF export, similar to Bryntum Gantt?

To achieve your requirement, we suggest to use the pdfExportProperties in the Gantt chart.  Using this, we can customize the PDF export page with features such as fileName, pageOrientation. Required columns, pageSize and etc. We have attached a code snippet and a sample for reference.

Ug link: https://ej2.syncfusion.com/vue/documentation/gantt/pdf-export/customize-pdf-export

// app.vue

toolbarClick: function(args)

{

    if (args.item.id === "GanttContainer_pdfexport")

    {

        var exportProperts =

        {

            ganttStyle: { font: new PdfTrueTypeFont(adventProFont, 12) },

        fileName: "new.pdf",

        pageOrientation: 'Portrait',

        pageSize: 'A0'

        };

    var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];

    ganttChart.pdfExport(exportProperts);

}

}

After custom property added pdf image:

Sample link:   https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdfexport_chinese_custom_props2071225873.zip

Other than above shared details, if you need any requirement in specific, revert us with further details.

Query 3:  When using Virtual Scrolling, the row drag and drop functionality may become ineffective when there are a large number of items.

We have prepared sample with row drag and drop with virtualization enabled, but we are unable to replicate the problem at our end.

Ug link: https://ej2.syncfusion.com/vue/documentation/gantt/drag-and-drop#drag-and-drop

Video link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/rrd-202788277.zip

<ejs-gantt ref='gantt' id="virtualscroll" 

            :dataSource= "data"

           :enableVirtualization= "true"

           :enableTimelineVirtualization = "true"

            …

           :allowRowDragAndDrop= "true">

</ejs-gantt>

import { GanttComponent, Selection, VirtualScroll, RowDD, Edit

}

from "@syncfusion/ej2-vue-gantt";

provide: {

  gantt: [Selection, VirtualScroll, RowDD, Edit]

}

Sample link: https://stackblitz.com/edit/fc3sr2-t9xy4z?file=src%2FApp.vue,src%2Fdata-source.js

Please ensure that you have injected corresponding modules for performing RowDD and Virtual scroll action.

We request you to share more information to find the exact cause of the issue. Kindly share the information below.

• Complete Gantt code sample.
• Number of records that you have used in your application.
• Have you faced any time delay with large number of items or any other issues(Explain the issue in detail)
• Video demo to replicate the issue(with replication steps).
• If possible, replicate the issue in a shared sample and revert back to us.

Once we receive this information, we will be better equipped to identify the root cause of the issue and provide you with the necessary assistance.

Regards,

Ajithkumar G