Gantt Export PDF Fit in one page

Question

Hi,Is there a way to export a gantt in pdf in one page? I would need to fit the gantt horizontally and, if possible, vertically. As for fitting horizontally, I tried by setting the export property "exportType" to CurrentViewData, which works, but I have to try different zooms before finding the right one, moreover I have a list of fixed zoom levels so it wouldn't be the optimal zoom.I cannot fit it vertically.And last question, would it be possible to select a set of columns to export? I read from the documentation that I can set which column to be visible, but couldn't do it properly, what I tried to do is to add a Dropdown where I pick the columns I want to export in the pdf. The problem is that I couldn't select the columns from the array of columns of the grid in the Gantt, do you think this would be possible to achieve?To sum up, I have these three questions:How can I export a gantt and fit it horizontally﻿﻿ in a pdfHow can I export a gantt and fit it vertically in a pdfHow can I select the columns to export Thank you

Premkumar Sudalaimuthu · Accepted Answer

Hi Matteo,

Query

Solution

How can
       I select the columns to export

We have prepared a sample for exporting
  the selected columns. In the below sample we have used a dropdown tree
  for ordering the columns in dataBound event and used a close event for passing the selected
  columns to Gantt columns. Please refer to the below sample and code snippets
  for more information.
   
  Code snippets:

var dtreedata = [
      {
        name: 'TaskID',
      },
     
      {
        name: 'TaskName',
      },
     
      {
        name: 'StartDate',
      },
     
      {
        name: 'EndDate',
      },
     
      {
        name: 'Duration',
      },
     
      {
        name: 'Progress',
      },
     
      {
        name:
    'Predecessor',
      },
      {
        name: 'Resources',
      },
    ];

dataBound() {
        if (flag) {
          var
    selected = true;
     
          let DropDownTreeObj = new
    DropDownTree({
            fields: {
             
    dataSource: dtreedata,

value: 'name',

text: 'name',
            },

showCheckBox: true,

placeholder: 'Column Chooser',

width: '300px',

popupWidth: '300px',

beforeOpen: function () {
             
    if (selected) {
             
      DropDownTreeObj.selectAll(true);

selected = false;
             
    }
           
    },

close: function
    (args) {
             
    var gantt = document.getElementById('GanttExport').ej2_instances[0];

for (var i = 0; i < DropDownTreeObj.value.length; i++) {
               
    showColumns.push(DropDownTreeObj.value[i]);
             
    }
     
              gantt.columns = showColumns;
           },
          });

DropDownTreeObj.appendTo('#columnChooser');
          flag =
    false;
        }
      }

Sample: https://stackblitz.com/edit/react-yburqa-dy2mke?file=index.js

Regards,Premkumar S

Premkumar Sudalaimuthu · Answer

Hi matteo ,

Query

Solution

How
       can I export a gantt and fit it horizontally﻿﻿ in a pdf
   How
       can I export a gantt and fit it vertically in a pdf

As
  of now, we do not have support for rendering whole Gantt in single pdf. We
  have already logged a feature request for this. You can track the status of
  the feature from the below feedback link. 
   
  Feedback: https://www.syncfusion.com/feedback/15817/provide-complete-ui-design-in-exported-pdf-document

However,
  we do not have any immediate plan to implement this feature. At the planning
  stage for every release cycle, we review all open features and implement the
  features based on feature rank, customer requested count, and volume
  wish-list.

How
       can I select the columns to export

We need time to validate whether your requirement has
  been possible or not and will share further details within two business days
  on 26th May 2022. Until then we appreciate your patience.

Regards,Premkumar S

matteomessmer · Answer

Hi Premkumar,I tried your code and I have a question. Do you think it would be possible to export the pdf without having to change the columns of the gantt?I mean, when I select the column I want to export, it will not affect the gantt but only the pdf.I'm trying this by making a copy of the ganttComponent instance and changin the columns of this new copy, but it doesn't work as I expect.import _ from "lodash";...let  g = _.cloneDeep(this.props.ganttInstance);g.columns = this.state.columnsToExport;g.pdfExport(exportProperties);This code is exporting the pdf with the columns as they were before g.columns = this.state.columnsToExport but after exporting I see the new selected columns.Do you have an idea of what is happening here? Am I triggering any event?Thanks.Best regards,Matteo Messmer

Gopinath Munusamy · Answer

Hi Matteo,We would like to let
you know that modifying the Gantt's columns is necessary in order to export the
pdf with the chosen columns. So, it is not possible to export the pdf
without changing the columns of the Gantt.If you face any issue in modifying Gantt
Columns, please get back to us with more details so that we could assist you as
early as possible.Regards,Gopinath
M

matteomessmer · Answer

Hi Gopinath,thank you for your quick reply. That's what I thought. I will try with a different approach.Best regards,Matteo Messmer

Monisha Sivanthilingam · Answer

Hi
Matteo,You
are welcome.Please
contact us if you require any further assistance.Regards,Monisha.