DevExtreme Gantt - Export to PDF, Task Appearance, and Scrolling Enhancements (v21.1)

DevExtreme Team Blog
21 July 2021
This post summarizes the newest features/capabilities of DevExtreme Gantt v21.1 including its ability to export content to PDF, customize task appearance settings, and scroll to a specific date.

Export to PDF (CTP)

DevExtreme Gantt v21.1 allows you to export its content to a PDF document and fully supports the following options:
  • WYSIWYG export
  • Page customization (format, orientation, margins)
  • Specific date range export
  • Ability to export the Gantt chart and task list separately

How It Works

Export to PDF is built upon the jsPDF library and its jsPDF-AutoTable plugin. You need to reference/import this library in your project to enable use of this new feature.
To export Gantt as a PDF document, call the exportToPdf method. It accepts an object with the following fields:
{
  // A PDF document constructor
  docCreateMethod: Function 

  // Page format ("A1", "A2", and so on) or size in pixels
  format: string | { width?: number; height?: number } 
  
  // If `true`, the exported document uses horizontal orientation
  landscape: Boolean 
  
  // File name
  fileName: string 
  
  // Allows you to export a particular part of the component
  exportMode: "chart" | "treeList" | "all" 
  
  // Exported date range
  dateRange: "visible" | "all" | { startDate?: Date, endDate?: Date, startIndex?: number, endIndex?: number } 
  
  // Page margins
  margins: { left?: number, right?: number, top?: number, bottom?: number } 
} 
The following code illustrates use of the exportToPdf method within a React project. This code exports a Gantt chart to a PDF document (A4 document with landscape orientation). The same method is available for Angular, Vue, jQuery, ASP.NET MVC, and ASP.NET Core.
import { Gantt } from "devextreme-react/gantt";
import { jsPDF } from "jspdf";
import "jspdf-autotable";

export default function App() {
  const ganttRef = useRef(null);
  const exportGantt = useCallback(() => {
    const gantt = ganttRef.current.instance;

    gantt.exportToPdf({
      docCreateMethod: jsPDF,
      format: "A4",
      landscape: true,
      exportMode: "chart",
      dateRange: "all",
      fileName: "gantt.pdf"
    });
  }, []);

  return (
    <Gantt ref={ganttRef}>
    {/* … */}
    </Gantt>
  );
} 

Try It Now

To explore the capabilities of this new export option, please refer to the following online demo: Export to PDF.
Our Gantt control’s Export to PDF feature is available as a Community Tech Preview (CTP). Since this feature is in active development, we welcome your thoughts and feedback. Feel free to leave a comment below or submit a support ticket via the DevExpress Support Center to share suggestions with us.

API Enhancements

Task Appearance Customization

The DevExtreme Gantt control allows you to customize the appearance of individual task elements within the Gantt chart.
Use the taskContentTemplate to specify the look and feel of each task as needs dictate. Note that an object with information about an individual task is passed as template data.

Scroll the Gantt to a Specific Date

DevExtreme Gantt v21.1 includes a new scrollToDate() method. This method allows you to scroll the chart area programmatically. The method accepts a date value specified as a Date object, date-time string, or timestamp. Any of the following commands scroll the Gantt chart to June 17, 2021:
gantt.scrollToDate(new Date(2021, 5, 17));

gantt.scrollToDate("2021/06/17");

gantt.scrollToDate(1623877200000); 
Note that the chart is scrolled within the current date range. If the target date is outside the range, you may need to change the scaleType property to increase the zoom level before calling the scrollToDate() method.

Your Feedback Matters

As always, we value your feedback. If you have any questions or suggestions, please comment below and let us know what you think of DevExtreme’s newest Gantt features.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.
Elton
Elton

Great to see these improvements!

The question we have is how close are DX Winforms Gantt and JS Gantt together in terms of interoperability?

We have a desktop and web application. The decision to use the DX Gantt in our products is a big one for us (we currently use a different tool) and it heavily relies on this compatibility.

Is there a comparison matrix somewhere and roadmap pelase?


Thanks

Elton


10 August 2021
Brent Ridenour
Brent Ridenour

Im having a slight problem getting the export to pdf to work.  Im following the example demo.  So I have a call like this:

ganttInstance = $("#gantt").dxGantt({ ... });

then i make a call like this:

ganttInstance.exportToPdf({...});

It says that exportToPdf is not a function.  I am loading the two libraries you list above, jspdf and jspdf-autotable.  


Are there special instructions to load these libraries?  How do I debug this?

Thanks.


18 August 2021
Nataly (DevExpress Support)
Nataly (DevExpress Support)

@Elton,

Our WinForms Gantt and dxGantt widgets are separate components that were developed independently. Although dxGantt can implement common usage scenarios, WinForms Gantt is older, so it supports more different features.

Unfortunately, we don't have a feature matrix to compare. Please check our documentation to make sure that DxGantt capabilities meet your requirements. Also, refer to our online demos to see the component in action.

23 August 2021
Nataly (DevExpress Support)
Nataly (DevExpress Support)

@Brent,

I created a new ticket in our Support Center so we can discuss this issue: dxGantt for Java Script - exportToPdf is not a function. Let's continue there. 

23 August 2021

Please login or register to post comments.