Virtual Scroll in JavaScript Gantt Chart Control
18 Nov 20182 minutes to read
Virtual scrolling in the JavaScript Gantt Chart control enhances performance by rendering only visible tasks and timeline segments, minimizing DOM operations for large datasets or extensive timelines. It includes row virtualization for handling thousands of tasks (e.g., 10,000 tasks in a project) and timeline virtualization for wide timelines (e.g., multi-year projects), both requiring VirtualScroll injection. Row virtualization renders tasks within the viewport, while timeline virtualization loads timeline cells on-demand during horizontal scrolling, ensuring efficient rendering for complex project management.
Configure row virtualization
Row virtualization, enabled by setting enableVirtualization to true, renders only tasks visible in the Gantt’s viewport, determined by the height property in pixels (e.g., “600px”). All tasks are fetched initially but rendered on-demand during vertical scrolling, reducing load times for large datasets. For example, a project with 10,000 tasks renders only the 50 visible tasks, improving performance. Inject VirtualScroll in the control’s providers to enable this feature. Ensure the height property is set explicitly to control the viewport size.
The following example enables row virtualization for a large dataset:
Configure timeline virtualization
Timeline virtualization, enabled by setting enableTimelineVirtualization to true, renders three times the Gantt’s width initially, loading additional timeline cells during horizontal scrolling. This optimizes performance for wide timelines, such as multi-year projects, by rendering only visible segments. It depends on timelineSettings for scale (e.g., monthly or daily tiers). Inject VirtualScroll to enable this feature.
The following example enables timeline virtualization for a wide timeline:
Virtual scroll limitations
Virtual scrolling has the following constraints:
- Incompatible with enableImmutableMode, as both use different rendering optimizations.
- Cell selection is not persisted due to on-demand rendering.
- Browser height limits restrict the maximum number of records in row virtualization.
- The height property must be set in pixels for row virtualization to define the viewport size.
- Set a static height for the Gantt chart or its parent container; 100% height only works if both the control and its parent have explicit static heights.
- With virtualization enabled, data is rendered in pages. When scrolling to load the next set of records, only the current page’s data is available to Gantt’s public methods. If a record is selected during this process, only the visible page records are returned. This behavior occurs because the Gantt chart does not retain data from all pages in memory, optimizing performance by loading only the required set.