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 }
} 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.