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;

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

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

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));


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.
No Comments

Please login or register to post comments.