JavaScript/jQuery Gantt - dependencies

Configures dependencies.

Type:

Default Value: null

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.

jQuery

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
},    
// ...
];

Angular

app.component.html

app.component.ts

app.module.ts

app.service.ts

angular.json

<dx-gantt ... >
    <dxo-dependencies
        [dataSource]="dependencies" 
        keyExpr="dependencyId"
        typeExpr="dependencyType"
        predecessorIdExpr="taskPredecessorId"
        successorIdExpr="taskSuccessorId" >
    </dxo-dependencies>
    <!-- ... -->
</dx-gantt>

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    dependencies: Dependency[];
    // ...

    constructor(service: Service) {
        this.dependencies = service.getDependencies();
        // ...
    }        
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';
import { Service, Dependency, ... } from './app.service';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],        
    declarations: [AppComponent],
    providers: [Service],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';

export class Dependency {
    dependencyId: number;
    taskPredecessorId: number;
    taskSuccessorId: number;
    dependencyType: number;
} 

let dependencies: Dependency[] = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0 
},
// ...   
]; 
@Injectable()
export class Service {
    getDependencies(): Dependency[] {
        return dependencies;
    }
}

{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.light.css",
              "node_modules/devexpress-gantt/dist/dx-gantt.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}

Vue

App.vue

data.js

<template>
    <DxGantt ... >
        <DxDependencies
            :data-source="dependencies"
            key-expr="dependencyId"
            type-expr="dependencyType"
            predecessor-id-expr="taskPredecessorId"
            successor-id-expr="taskSuccessorId" />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

    import { 
        DxGantt, 
        DxDependencies, 
        // ... 
    } from 'devextreme-vue/gantt';
    import { 
        dependencies, 
        // ... 
    } from './data.js';

    export default {
        components: { 
            DxGantt, 
            DxDependencies, 
            // ... 
        },
        data() {
            return { 
                dependencies, 
                // ... 
            };
        }
    };
</script>

export const dependencies = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0
},
// ...
];

React

App.js

data.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    Dependencies, 
    // ... 
} from 'devextreme-react/gantt';
import { 
    dependencies, 
    // ... 
} from './data.js';

const App = () => {
    return (
        <Gantt ... >
            <Dependencies 
                dataSource={dependencies}
                keyExpr="dependencyId"
                typeExpr="dependencyType"
                predecessorIdExpr="taskPredecessorId"
                successorIdExpr="taskSuccessorId" />
            {/* ... */}
        </Gantt>
    );
};

export default App;

export const dependencies = [{
    'dependencyId': 0,
    'taskPredecessorId': 1,
    'taskSuccessorId': 2,
    'dependencyType': 0
},
// ...
];

ASP.NET Core Controls

Razor C#

@(Html.DevExtreme().Gantt<Gantt.Task>()
    .Dependencies(d => d
        .DataSource(ds => ds.Array().Data(SampleData.GanttDependencies).Key("ID"))
        .KeyExpr("ID")
        .PredecessorIdExpr("PredecessorId")
        .SuccessorIdExpr("SuccessorId")
        .TypeExpr("Type")
    )        
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Dependency> GanttDependencies = new[] {
        new Dependency { ID = 1, PredecessorId = 3, SuccessorId = 4, Type = 0 },
        new Dependency { ID = 2, PredecessorId = 4, SuccessorId = 5, Type = 0 },
        // ...
    }
    // ...
}

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Gantt<Task>()
    .Dependencies(d => d
        .DataSource(ds => ds.Array().Data(SampleData.GanttDependencies).Key("ID"))
        .KeyExpr("ID")
        .PredecessorIdExpr("PredecessorId")
        .SuccessorIdExpr("SuccessorId")
        .TypeExpr("Type")
    )        
    // ...
)
<!-- C# -->
public partial class SampleData {
    public static readonly IEnumerable<Dependency> GanttDependencies = new[] {
        new Dependency { ID = 1, PredecessorId = 3, SuccessorId = 4, Type = 0 },
        new Dependency { ID = 2, PredecessorId = 4, SuccessorId = 5, Type = 0 },
        // ...
    }
    // ...
}