Blazor Gantt Chart Example - Virtual Scrolling for Large Datasets

This sample demonstrates the virtual scrolling feature in the Blazor Gantt Chart, designed to efficiently handle large datasets while minimizing DOM load. Virtualization improves performance by rendering only the visible portion of tasks, columns, and timeline cells based on the current viewport.

In virtualization mode, all tasks are fetched from the data source initially, but only a limited number of rows and columns are rendered in the DOM. As vertical scrolling occurs, tasks are dynamically updated based on the scroll position. Similarly, the timeline is rendered up to three times the chart’s width, with additional cells loaded on demand during horizontal scrolling. Columns are also rendered dynamically as horizontal scrolling progresses.

To enable virtualization:

• Set EnableRowVirtualization property to activate row level virtualization.
• Set EnableTimelineVirtualization property to enable timeline virtualization.
• Set EnableColumnVirtualization property to enable column virtualization.

The OverscanCount property allows rendering of additional items before and after the visible range, reducing the frequency of DOM updates during scrolling. In this sample, the page size is set to 20 and the overscan count to 5, resulting in 25 records rendered at a time. If PageSize property is not defined, the number of rendered records depends on the chart’s height and viewport size, including the overscan buffer.

The demo includes row, column, and timeline virtualization, along with support for editing actions. A dropdown list is also provided to select the number of records to load 1,000, 2,500, or 5,000 and the initial data load time is displayed in milliseconds to help evaluate performance.

The toolbar provides built-in options for add, update, delete, zoom in, and zoom out operations, enabling interactive task management.

For further details, refer to the documentation.