Virtualization support enhances the performance of the Gantt Chart by efficiently rendering large tasks, columns, and extensive timelines.

In virtualization mode, all tasks are initially fetched from the data source, but only a limited number of records and columns are rendered in the DOM, depending on the current viewport area. As you scroll vertically, the tasks are updated in the DOM based on the viewport's position. Similarly, the timeline is rendered only up to three times the width of the Gantt Chart, with additional timeline cells loaded on-demand during horizontal scrolling. Columns are also rendered dynamically during horizontal scrolling. Enable row virtualization by setting the EnableRowVirtualization property, timeline virtualization by setting the EnableTimelineVirtualization property, and column virtualization by setting the EnableColumnVirtualization property.

The OverscanCount property allows rendering of additional items before and after the visible items (based on page size) during virtual scrolling and initial rendering. This reduces the frequency of rendering during scrolling. In this sample, the page size is set to 20 and the overscan count is 5, so a total of 25 records will be rendered in the DOM.

If the PageSize property is not enabled, the number of records rendered depends on the Gantt Chart's height and viewport size, including the overscan count.

This demo enables row, column, and timeline virtualization. Editing actions can also be performed in this sample.

More information on virtualization can be found in this documentation section.