What are the different ways to improve the performance of the gantt with a large set of tasks?

a) GanttControl.WorkTimeSchedule property

Note that by default the GanttControl uses a "5 days a week, 8 hours a day" work-time schedule to calculate the duration of a task. But, it's possible that in your gantt application, you don't care for specific working-times. You might simply want to follow a 24 X 7 schedule where a task with 24 hour effort would have a duration of 1 day (in a 8 X 5 schedule the duration would be 3 days or more if it spans across weekends).

To set a 24 X 7 schedule which in turn would improve load time performance, do this:

$gantt_container.GanttControl({

// other options..

WorkTimeSchedule: null

});

b) Disable Time Validations while building the Model

The gantt model does a lot of validations when the activity's times are set. But, validating the times might be unnecessary, if you know for a fact that the persisted times are proper (the start and end times don't fall under non-working times, etc.). To turn off validation for such scenarios, do this on gantt initialization:

$gantt_container.GanttControl({

// other options..

EnforceDependencyConstraints:false,

ValidateDependencySetting:false

});

.... and turn it back on like this after tue gantt is initialized,

$ganttControl = $gantt_container.data("GanttControl");

$ganttControl.Model.EnforceDependencyConstraints = true;

$ganttControl.Model.ValidateDependencySetting = true;

c) Enable EndTimeBinding

If your tasks have a field with EndTime information and if this field is reliably updated by the gantt and not by any other source, then you can setup the EndTimeBinding in the gantt. This will make the gantt use the pre-calculated EndTime value instead of calculating it on load, thus improving performance. More on this is discussed here and here.

d) Avoiding Multiple GanttChart Redraws during load

After the Gantt is initialized, the following settings changes will redraw the GanttChart, so these settings are best set during initializing the gantt.

1) Changing the BaseTimeUnitWidth (Zoom level).

2) Changing AnchorTime (paging and setting chart start and end changes the anchor time).

3) Changing ViewWidth and ResizeToFit.

Here is an example of how the above are best set during init:

var yearHeader = self.yearHeaderLine();

var monthHeader = self.monthHeaderLine();

tmshs.add(yearHeader);

tmshs.add(monthHeader);

$gantt_container.GanttControl({

TimeScaleHeaders: tmshs,

DataSource: jsonData,

GanttTableOptions: {

columns: columns,

GanttChartTemplateApplied: function (sender, args) {

var $GanttChart = args.element;

$GanttChart.GanttChart({ AnchorTime: anchorTime, ViewWidth: 2000, ResizeToFit: false, });

}

});

Here is an example that shows incorrect setting of the above properties resulting in multiple redraws:

var yearHeader = self.yearHeaderLine();

var monthHeader = self.monthHeaderLine();

tmshs.add(yearHeader);

tmshs.add(monthHeader);

var $ganttChart = null;

$gantt_container.GanttControl({

DataSource: self.jsonData,

GanttTableOptions: {

columns: columns,

GanttChartTemplateApplied: function (sender, args) {

$ganttChart = args.element;

}

});

// Too late

$gantt_container.GanttControl({

TimeScaleHeaders: tmshs

});

$ganttChart.GanttChart({ AnchorTime: newAnchortime });

e) Efficient Redraws

See this topic that discusses how you can sandwich multiple property changes in a BeginUpdate/EndUpdate calls to avoid multiple redraws.