Virtualization In Gantt

Gantt uses 2 views to render the tasks or resources - the grid or table view and the chart view. These two views can be rendering virtualized as discussed below.

Use of Virtualization

Virtualization in the context of gantt is rendering only those elements that are currently visible in the vertical scroll view. This allows us to support visualizing 1000s of tasks at the same time without unduly affecting the rendering performance, etc.

Without turning on Virtualization in the gantt, the gantt would typically begin to slow down when there are more than 2000 rows to render. But, with virtualization turned on, you will see much improved performance for any number of rows (but note that with the GanttControl, building the gantt's internal model could slow down as the number of task items goes up).

Setting Virtualization:

You can turn on virtualization in the gantt as follows (this enables virtualization on both the grid and chart porition):

In HTML

// Setting "UseVirtualization" option in gantt to "true" will turn on virtualization in the both gantt table and chart.

$gantt_container.GanttControl({

UseVirtualization: true,

});

In ASP.NET MVC

// Setting "UseVirtualization" option in gantt to "true" will turn on virtualization in the both gantt table and chart.

@Html.JQProjectGantt(

new JQProjectGanttSettings()

{

Options = new ProjectGanttOptions()

{

UseVirtualization=true,

GanttChartOptions = new GanttChartOptions()

{

AnchorTime = DateTime.Today

}

})

In ASP.NET

<RQ:GanttControl ID="gantt" UseVirtualization="true".." Height="500px" runat="server" />

There is however a drawback in turning virtualization on with regards to rendering dependency lines. Since only the visible rows are rendered, if a dependency line's start or end task is not visible then the line will only be partly rendered and if both the start and end tasks are not visible, then the dependency line will not be rendered at all.

Chart View Virtualization

Optionally, you can turn on virtualization in the gantt chart region alone as follows:

In HTML

// Setting "UseChartVirtualization" option in gantt to "true" will turn on virtualization only in the gantt chart.

$gantt_container.GanttControl({

UseChartVirtualization: true,

});