Vue Gantt API

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

import DxGantt from "devextreme-vue/gantt"
Selector: DxGantt

View Demo

See Also
jQuery
Angular
Vue
React
jQuery
Angular
Vue
React

Props

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 the UI component changes its visual state as a result of user interaction.
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.
endDateRange

Specifies the end date of the date interval in the Gantt chart.
filterRow

Configures filter row settings.
firstDayOfWeek

Specifies the first day of a week.
focusStateEnabled

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

Configures the header filter settings.
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 is rendered and each time the component is repainted.
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.
onResourceManagerDialogShowing

A function that is executed before the Resource Manager dialog is shown.
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.
onScaleCellPrepared

A function that is executed before a scale cell is prepared.
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.
scaleTypeRange

Configures zoom range settings.
selectedRowKey

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

Specifies whether to display dependencies between tasks.
showResources

Specifies whether to display task resources.
showRowLines

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

Configures sort settings.
startDateRange

Specifies the start date of the date interval in the Gantt chart.
stripLines

Configures strip lines.
tabIndex

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

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

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

Specifies custom content for the task.
taskListWidth

Specifies the width of the task list in pixels.
taskProgressTooltipContentComponent

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

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

Specifies custom content for the tooltip that displays the task's progress while the progress handler is resized in the UI.
tasks

Configures tasks.
taskTimeTooltipContentComponent

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

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

Specifies custom content for the tooltip that displays the task's start and end time while the task is resized in the UI.
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
jQuery
Angular
Vue
React

Methods

This section describes methods that control the Gantt UI component.

Name Description
assignResourceToTask(resourceKey, taskKey)

Assigns a resource to a task.
beginUpdate()

Postpones rendering that can negatively affect performance until the endUpdate() method is called.
collapseAll()

Collapses all tasks.
collapseTask(key)

Collapses a task.
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.
expandAll()

Expands all tasks.
expandAllToLevel(level)

Expands all tasks down to the specified hierarchical level.
expandTask(key)

Expands a task.
expandToTask(key)

Expands a task's parent tasks.
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.
refresh()

Reloads data and repaints the Gantt component.
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 a property to its default value.
scrollToDate(date)

Scrolls the Gantt chart to the specified date.
showDependencies(value)

Shows or hides dependencies between tasks.
showResourceManagerDialog()

Invokes the "Resource Manager" dialog.
showResources(value)

Shows or hides task resources.
showTaskDetailsDialog(taskKey)

Invokes the "Task Details" dialog.
unassignAllResourcesFromTask(taskKey)

Removes all resources from the task.
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.
zoomIn()

Zooms in the Gantt chart.
zoomOut()

Zooms out the Gantt chart.

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.
resourceManagerDialogShowing

Raised before the Resource Manager dialog is shown.
resourceUnassigned

Raised when a resource is unassigned from a task.
resourceUnassigning

Raised before a resource is unassigned from a task.
scaleCellPrepared

Raised before a scale cell is prepared.
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
jQuery
Angular
Vue
React