Virtual Scrolling

17 Feb 20223 minutes to read

Virtual Scroll support in Gantt allows you to load large amount of data without performance degradation. To enable Virtual Scrolling, you need to inject VirtualScroll module in Gantt.

Row Virtualization

Row virtualization allows you to load and render a large number of tasks in Gantt with effective performance. In this mode, all tasks are fetched initially from the datasource and rendered in the DOM within a compact viewport area.

The number of records displayed in the Gantt is determined by the height.

This mode can be enable by setting the EnableVirtualization property to true.

<ejs-gantt id='VirtualScroll' dataSource="ViewBag.dataSource" height="450px"
                           highlightWeekends="true" enableVirtualization="true" allowSelection="true" gridLines="Both">
                    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                                        duration="Duration" progress="Progress" parentID="ParentID">
                    </e-gantt-taskfields>
                    <e-gantt-columns>
                        <e-gantt-column field="TaskId" width="140"></e-gantt-column>
                        <e-gantt-column field="TaskName" width="250"></e-gantt-column>
                        <e-gantt-column field="StartDate"></e-gantt-column>
                        <e-gantt-column field="EndDate"></e-gantt-column>
                        <e-gantt-column field="Duration"></e-gantt-column>
                        <e-gantt-column field="Progress"></e-gantt-column>
                    </e-gantt-columns>
                    <e-gantt-labelSettings taskLabel="Progress"></e-gantt-labelSettings>
                    <e-gantt-splittersettings columnIndex="2"></e-gantt-splittersettings>
                </ejs-gantt>
public IActionResult Index()
        {
            ViewBag.dataSource = GanttData.VirtualData();
            return View();
        }

Alt text

Limitations for Virtual Scroll

  • Due to the element height limitation in browsers, the maximum number of records loaded is limited by the browser capacity.
  • Cell selection will not be persisted.
  • The number of records rendered will be determined by the Height property.
  • It is necessary to mention the height of the Gantt in pixels when enabling Virtual Scrolling.
  • Currently, we do not have support for Row Drag and Drop when virtualization is enabled.
  • Virtual Scroll does not support Multi Taskbar support in Resource View.