JavaScript/jQuery Gantt - dependencies
Dependencies specify the relationships between tasks. The following image illustrates how the Gantt displays dependencies in the chart:
The Gantt widget 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.
Use the dataSource option to bind the widget 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 options to map data fields.
See Also
jQuery
$(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
<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;
}
} Vue
<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.common.css';
import 'devextreme/dist/css/dx.light.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
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import Gantt, {
Dependencies,
// ...
} from 'devextreme-react/gantt';
import {
dependencies,
// ...
} from './data.js';
class App extends React.Component {
render() {
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
},
// ...
];dataSource
Refer to the dependencies option to see how to specify the dataSource option.
predecessorIdExpr
Refer to the dependencies option to see how to specify the predecessorIdExpr option.