Maintain Zoom-to-fit in TypeScript Gantt Chart Control
18 Nov 20181 minute to read
The zoom-to-fit functionality in the TypeScript Gantt Chart control ensures the entire project timeline fits within the viewport, providing an optimal view of all tasks. When using the zoomToFit toolbar item, editing actions (e.g., cell edit, dialog edit, taskbar edit) or dynamic dataSource changes can cause the timeline to refresh, potentially losing the zoomed view. By leveraging the fitToProject method, you can maintain the zoom-to-fit state seamlessly. For editing actions, call fitToProject in the actionComplete and taskbarEdited events to reapply zoom-to-fit after modifications like updating task durations or dependencies. For dynamic dataSource changes, such as adding or removing tasks, invoke fitToProject in the dataBound event to adjust the timeline automatically. Ensure Toolbar is injected and toolbar includes zoomToFit to enable this feature, with valid timelineSettings configured for accurate rendering. This approach maintains a consistent project overview, integrating with task scheduling, dependencies, and critical path for efficient project management.
The following example demonstrates how to use fitToProject after performing edit actions:
The following example demonstrates how to use fitToProject after dynamically changing the data source: