GanttBase

The file name of an image file to use when a resource has no image, or its image cannot be loaded.

A task field (id, wbsCode, sequenceNumber etc) that will be used when displaying and editing linked tasks.

See Keyboard shortcuts for details

Configure as true to make the Gantt read-only, by disabling any UIs for modifying data.

Note that checks MUST always also be applied at the server side.

The path for resource images, used by various widgets such as the resource assignment column.

The path for resource images, used by various widgets such as the resource assignment column.

True to scroll the task bar into view when clicking a cell, you can also pass a scroll config object.

Specify as false to not show unscheduled tasks on the Gantt chart. Unscheduled tasks will be rendered as an icon

True to toggle the collapsed/expanded state when clicking a parent task bar.

A ProjectModel instance or a config object. The project holds all Gantt data.

If set to true this will:

• show cost, quantity and rate table columns on the task editor "Resources" tab
• show "Rate table" columns in the assignment column editor picker
• include "Cost" column in the "Add new..." column dropdown list

If set to true this will show a color field in the TaskEdit editor and also a picker in the TaskMenu. Both enables the user to choose a color which will be applied to the task bar's background. See TaskModel's eventColor config.

Set to true for sub tasks to inherit their parent´s eventColor

A callback function or a set of name: value properties to apply on tasks created using the task context menu. Be aware that name value will be ignored since it's auto generated and may be configured with localization.

Example:

// Object form:
newTaskDefaults : {
   duration          : 3,
   manuallyScheduled : true,
   percentDone       : 15
}

// Function form:
newTaskDefaults : (targetRecord) => {
   return {
       duration          : targetRecord.duration,
       manuallyScheduled : targetRecord.manuallyScheduled
   }
}

Configure UI transitions for various actions in the grid.

Task color used by default. Tasks can specify their own eventColor, which will override this config.

For available standard colors, see EventColor.

Returns dates that will constrain resize and drag operations. The method will be called with the task being dragged.

An empty function by default, but provided so that you can override it. This function is called each time a task is rendered into the gantt to render the contents of the task.

Returning a string will display it in the task bar, it accepts both plain text or HTML. It is also possible to return a DOM config object which will be synced to the task bars content.

// using plain string
new Gantt({
   taskRenderer : ({ taskRecord }) => StringHelper.encodeHtml(taskRecord.name)
});

// using html string
new Gantt({
   taskRenderer : ({ taskRecord }) => StringHelper.xss`${taskRecord.id} <b>${taskRecord.name}</b>`
});

// using DOM config
new Gantt({
   taskRenderer({ taskRecord }) {
      return {
          tag  : 'b',
          html : StringHelper.encodeHtml(taskRecord.name)
      }
   }
});

Configure as true to make the Gantt read-only, by disabling any UIs for modifying data.

Note that checks MUST always also be applied at the server side.

True to scroll the task bar into view when clicking a cell, you can also pass a scroll config object.

Specify as false to not show unscheduled tasks on the Gantt chart. Unscheduled tasks will be rendered as an icon

True to toggle the collapsed/expanded state when clicking a parent task bar.

The ProjectModel instance containing the data visualized by the Gantt chart.

Set to true for sub tasks to inherit their parent´s eventColor

Configure UI transitions for various actions in the grid.

Task color used by default. Tasks can specify their own eventColor, which will override this config.

For available standard colors, see EventColor.

Returns the dependency record for a DOM element

NOTE: Only available when the Dependencies feature is enabled.

Highlights the elements of the passed task records (or ids). If scrollToClosest is set to true (which it is by default), the highlighted task element closest to the viewport center will be scrolled into view.

The highlighting will be done by adding the css class b-highlighted to the highlighted task elements. Also, the css class b-is-highlighting will be added to the TimeAxisSubGrid element.

// Highlight a single task
gantt.highlightTasks({ tasks : 22 });
// Highlight multiple tasks
gantt.highlightTasks({ tasks : [1, 40] });
// Don't scroll to highlighted task and don't un-highlight on click
gantt.highlightTasks({ tasks : 1000, scroll : false, unhighlightOnClick : false });

Removes highlighting from the elements of the passed task records (or ids). If no tasks are passed all highlighted tasks will be un-highlighted.

gantt.unhighlightTasks({ tasks : 22 }); // single task
gantt.unhighlightTasks({ tasks : [1, 40] }); // multiple events

Adds a new milestone task below the passed reference task

Adds a predecessor task to the passed reference task

Adds a new subtask to the passed reference task

Adds a successor task to the passed reference task

Adds a new task above the passed reference task. If no options are provided, the new task will inherit the data from the reference task

Adds a new task below the passed reference task. If no options are provided, the new task will inherit the data from the reference task

Increase the indentation level of one or more tasks in the tree. Has no effect if TreeGroup has regrouped the tree.

Decrease the indentation level of one or more tasks in the tree. Has no effect if TreeGroup has regrouped the tree.