JavaScript/jQuery Gantt - dependencies

Configures dependencies.

Type:

Object

Default Value: null

View Demo

Dependencies specify the relationships between tasks. The following image illustrates how the Gantt displays dependencies in the chart:

DevExtreme Gantt Chart - Dependencies

The Gantt UI component supports the following dependency types:

  • Finish to Start (FS) - The predecessor task's endpoint specifies the successor task's start point.

  • Start to Start (SS) - The predecessor task's start point specifies the successor task's start point.

  • Finish to Finish (FF) - The predecessor task's end point specifies the successor task's end point.

  • Start to Finish (SF) - The predecessor task's start point specifies the successor task's end point.

In a database, you can use any of the following formats (digit or string) to store dependency types:

Dependency Type Supported Values
Finish to Start (FS) 0, "0", "FS", "fs"
Start to Start (SS) 1, "1", "SS", "ss"
Finish to Finish (FF) 2, "2", "FF", "ff"
Start to Finish (SF) 3, "3", "SF", "sf"

Use the dataSource property to bind the UI component to a data source, which contains information about dependency types. If the field names in your data source differ from the 'id', 'type', 'predecessorId' and 'successorId' default names, use the keyExpr, typeExpr properties to map data fields.

See Also
index.js
data.js
  • $(function() {
  • $("#gantt").dxGantt({
  • dependencies: {
  • dataSource: dependencies,
  • keyExpr: "dependencyId",
  • typeExpr: "dependencyType",
  • predecessorIdExpr: "taskPredecessorId",
  • successorIdExpr: "taskSuccessorId"
  • },
  • //...
  • });
  • });
  • var dependencies = [{
  • 'dependencyId': 0,
  • 'taskPredecessorId': 1,
  • 'taskSuccessorId': 2,
  • 'dependencyType': 0
  • },
  • // ...
  • ];

dataSource

Binds the UI component to the data source which contains dependencies.

Default Value: null

Refer to the dependencies property to see how to specify the dataSource property.

keyExpr

Specifies the data field that provides keys for dependencies.

Type:

String

|

Function

Default Value: 'id'

Refer to the dependencies property to see how to specify the keyExpr property.

predecessorIdExpr

Specifies the data field that provides predecessor IDs.

Type:

String

|

Function

Default Value: 'predecessorId'

Refer to the dependencies property to see how to specify the predecessorIdExpr property.

successorIdExpr

Specifies the data field that provides successor IDs.

Type:

String

|

Function

Default Value: 'successorId'

Refer to the dependencies property to see how to specify the successorIdExpr property.

typeExpr

Specifies the data field that provides dependency types.

Type:

String

|

Function

Default Value: 'type'

Refer to the dependencies property to see how to specify the typeExpr property.