Gantt

The Gantt is a UI component that displays the task flow and dependencies between tasks.

Included in: dx-gantt.js, dx.all.js
import Gantt from "devextreme/ui/gantt"
Gantt interactive configuration
Copy Code
Copy to Codepen
import Gantt from "devextreme/ui/gantt";

new Gantt(container, {
});

                    
Type:

Object

View Demo

See Also

Configuration

An object that defines the Gantt UI component's configuration properties.

Name Description
accessKey

Specifies the shortcut key that sets focus on the UI component.

activeStateEnabled

Specifies whether or not the UI component changes its state when interacting with a user.

allowSelection

Specifies whether users can select tasks in the Gantt.

columns

An array of columns in the Gantt.

contextMenu

Configures the context menu settings.

dependencies

Configures dependencies.

disabled

Specifies whether the UI component responds to user interaction.

editing

Configures edit properties.

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

firstDayOfWeek

Specifies the first day of a week.

focusStateEnabled

Specifies whether the UI component can be focused using keyboard navigation.

height

Specifies the UI component's height.

hint

Specifies text for a hint that appears when a user pauses on the UI component.

hoverStateEnabled

Specifies whether the UI component changes its state when a user pauses on it.

onContentReady

A function that is executed when the UI component's content is ready and each time the content is changed.

onContextMenuPreparing

A function that is executed before the context menu is rendered.

onCustomCommand

A function that is executed after a custom command item was clicked. Allows you to implement a custom command's functionality.

onDependencyDeleted

A function that is executed when a dependency is deleted.

onDependencyDeleting

A function that is executed before a dependency is deleted.

onDependencyInserted

A function that is executed when a dependency is inserted.

onDependencyInserting

A function that is executed before a dependency is inserted.

onDisposing

A function that is executed before the UI component is disposed of.

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

onOptionChanged

A function that is executed after a UI component property is changed.

onResourceAssigned

A function that is executed when a resource is assigned to a task.

onResourceAssigning

A function that is executed before a resource is assigned to a task.

onResourceDeleted

A function that is executed when a resource is deleted.

onResourceDeleting

A function that is executed before a resource is deleted.

onResourceInserted

A function that is executed when a resource is inserted.

onResourceInserting

A function that is executed before a resource is inserted.

onResourceUnassigned

A function that is executed when a resource is unassigned from a task.

onResourceUnassigning

A function that is executed before a resource is unassigned from a task.

onSelectionChanged

A function that is executed after users select a task or clear its selection.

onTaskClick

A function that is executed when a user clicks a task.

onTaskDblClick

A function that is executed when a user double-clicks a task.

onTaskDeleted

A function that is executed when a task is deleted.

onTaskDeleting

A function that is executed before a task is deleted.

onTaskEditDialogShowing

A function that is executed before the edit dialog is shown.

onTaskInserted

A function that is executed when a task is inserted.

onTaskInserting

A function that is executed before a task is inserted.

onTaskMoving

A function that is executed before a task is moved.

onTaskUpdated

A function that is executed when a task is updated.

onTaskUpdating

A function that is executed before a task is updated.

resourceAssignments

Configures resource assignments.

resources

Configures task resources.

rootValue

Specifies the root task's identifier.

scaleType

Specifies the zoom level of tasks in the Gantt chart.

selectedRowKey

Allows you to select a row or determine which row is selected.

showResources

Specifies whether to display task resources.

showRowLines

Specifies whether to show/hide horizontal faint lines that separate tasks.

stripLines

Configures strip lines.

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

taskListWidth

Specifies the width of the task list in pixels.

tasks

Configures tasks.

taskTitlePosition

Specifies a task's title position.

taskTooltipContentComponent

An alias for the taskTooltipContentTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

taskTooltipContentRender

An alias for the taskTooltipContentTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

taskTooltipContentTemplate

Specifies custom content for the task tooltip.

toolbar

Configures toolbar settings.

validation

Configures validation properties.

visible

Specifies whether the UI component is visible.

width

Specifies the UI component's width.

See Also

Methods

This section describes methods that control the Gantt UI component.

Name Description
assignResourceToTask(resourceKey, taskKey)

Assigns a resource to a task.

beginUpdate()

Prevents the UI component from refreshing until the endUpdate() method is called.

defaultOptions(rule)

Specifies the device-dependent default configuration properties for this component.

deleteDependency(key)

Deletes a dependency.

deleteResource(key)

Deletes a resource.

deleteTask(key)

Deletes a task.

dispose()

Disposes of all the resources allocated to the Gantt instance.

element()

Gets the root UI component element.

endUpdate()

Refreshes the UI component after a call of the beginUpdate() method.

focus()

Sets focus on the UI component.

getDependencyData(key)

Gets the dependency data.

getInstance(element)

Gets the instance of a UI component found using its DOM node.

getResourceAssignmentData(key)

Gets the resource assignment data.

getResourceData(key)

Gets the resource data.

getTaskData(key)

Gets the task data.

getTaskResources(key)

Gets resources assigned to a task.

getVisibleDependencyKeys()

Gets the keys of the visible dependencies.

getVisibleResourceAssignmentKeys()

Gets the keys of the visible resource assignments.

getVisibleResourceKeys()

Gets the keys of the visible resources.

getVisibleTaskKeys()

Gets the keys of the visible tasks.

insertDependency(data)

Inserts a new dependency.

insertResource(data, taskKeys)

Inserts a new resource.

insertTask(data)

Inserts a new task.

instance()

Gets the UI component's instance. Use it to access other methods of the UI component.

off(eventName)

Detaches all event handlers from a single event.

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

on(eventName, eventHandler)

Subscribes to an event.

on(events)

Subscribes to events.

option()

Gets all UI component properties.

option(optionName)

Gets the value of a single property.

option(optionName, optionValue)

Updates the value of a single property.

option(options)

Updates the values of several properties.

registerKeyHandler(key, handler)

Registers a handler to be executed when a user presses a specific key.

repaint()

Repaints the UI component without reloading data. Call it to update the UI component's markup.

resetOption(optionName)

Resets an property to its default value.

unassignResourceFromTask(resourceKey, taskKey)

Removes a resource from the task.

updateDimensions()

Updates the dimensions of the UI component contents.

updateTask(key, data)

Updates the task data.

Events

This section describes the events this UI component raises.

Name Description
contentReady

Raised when the UI component's content is ready.

contextMenuPreparing

Raised before the context menu is rendered.

customCommand

Raised after a custom command item was clicked.

dependencyDeleted

Raised when a dependency is deleted.

dependencyDeleting

Raised before a dependency is deleted.

dependencyInserted

Raised when a dependency is inserted.

dependencyInserting

Raised before a dependency is inserted.

disposing

Raised before the UI component is disposed of.

initialized

Raised only once, after the UI component is initialized.

optionChanged

Raised after a UI component property is changed.

resourceAssigned

Raised when a resource is assigned to a task.

resourceAssigning

Raised before a resource is assigned to a task.

resourceDeleted

Raised when a resource is deleted.

resourceDeleting

Raised before a resource is deleted.

resourceInserted

Raised when a resource is inserted.

resourceInserting

Raised before a resource is inserted.

resourceUnassigned

Raised when a resource is unassigned from a task.

resourceUnassigning

Raised before a resource is unassigned from a task.

selectionChanged

Raised after users select a task or clear its selection.

taskClick

Raised when a user clicks a task.

taskDblClick

Raised when a user double-clicks a task.

taskDeleted

Raised when a task is deleted.

taskDeleting

Raised before a task is deleted.

taskEditDialogShowing

Raised before the edit dialog is shown.

taskInserted

Raised when a task is inserted.

taskInserting

Raised before a task is inserted.

taskMoving

Raised before a task is moved.

taskUpdated

Raised when a task is updated.

taskUpdating

Raised before a task is updated.

See Also