Dependencies

Source code

TypeScript ts

import { GANTT_DEPENDENCIES_ADVANCED_DEMO } from './gantt-advanced-data';
import { loadAdvancedGanttDemo } from './GanttAdvancedVanillaDemo';

export function load(parentSelector: string) {
  return loadAdvancedGanttDemo(parentSelector, GANTT_DEPENDENCIES_ADVANCED_DEMO);
}

Vue vue

<template>
  <GanttAdvancedDemo :demo="GANTT_DEPENDENCIES_ADVANCED_DEMO" />
</template>

<script setup lang="ts">
import GanttAdvancedDemo from './GanttAdvancedDemo.vue';
import { GANTT_DEPENDENCIES_ADVANCED_DEMO } from './gantt-advanced-data';
</script>

React tsx

import React from 'react';
import GanttAdvancedDemo from './GanttAdvancedReactDemo';
import { GANTT_DEPENDENCIES_ADVANCED_DEMO } from './gantt-advanced-data';

export default function GanttDependenciesAdvanced() {
  return <GanttAdvancedDemo demo={GANTT_DEPENDENCIES_ADVANCED_DEMO} />;
}

Angular ts

import { Component, NO_ERRORS_SCHEMA, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { GanttAdvancedAngularBase } from './GanttAdvancedAngularBase';
import { GANTT_DEPENDENCIES_ADVANCED_DEMO } from './gantt-advanced-data';

@Component({
  selector: 'gantt-dependencies-advanced-grid',
  standalone: true,
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
  schemas: [NO_ERRORS_SCHEMA],
  imports: [RevoGrid],
  template: `<revo-grid style="min-height: 560px" [theme]="theme" [hideAttribution]="true" [plugins]="plugins" [source]="tasks" [columns]="columns" [gantt]="ganttConfig" [ganttDependencies]="dependencies" [ganttCalendars]="calendars" [ganttResources]="resources" [ganttAssignments]="assignments"></revo-grid>`,
  encapsulation: ViewEncapsulation.None,
})
export class GanttDependenciesAdvancedGridComponent extends GanttAdvancedAngularBase {
  protected readonly demo = GANTT_DEPENDENCIES_ADVANCED_DEMO;
}

Dependencies constrain automatic successors using the relationship type and optional lag:

Type	MSP token	Constraint
finish-to-start	FS	Successor starts after predecessor finishes.
start-to-start	SS	Successor starts no earlier than predecessor starts.
finish-to-finish	FF	Successor finishes no earlier than predecessor finishes.
start-to-finish	SF	Successor finishes no earlier than predecessor starts.

Using Lag and Lead

Use lagDays for lag or lead:

grid.ganttDependencies = [
  {
    id: 'build-test',
    predecessorTaskId: 'build',
    successorTaskId: 'test',
    type: 'finish-to-start',
    lagDays: -2,
  },
];

Positive lagDays delays the successor. Negative lagDays is lead time and allows overlap, matching Microsoft Project’s negative lead syntax.

lagCalendar in scheduling config controls whether lag is interpreted as calendar days or working days.

Inline Cell Syntax

Inline predecessor/successor cells accept MSP-style tokens:

1FS
2SS+3
3FF-1d
task-4SF-2

Blank or invalid lag normalizes to 0. The optional d suffix is accepted. Whitespace around tokens is ignored.

Validation Behavior

Important dependency behavior:

• Cycles are detected during validation.
• Missing predecessor/successor references produce issues.
• Dependency links are rendered in the overlay layer and can be created/edited interactively.

Examples

Auto Successor Clamps to FS Dependency

An automatic successor cannot silently move before its predecessor allows:

grid.source = [
  {
    id: 'design',
    name: 'Design',
    startDate: '2026-04-01',
    durationDays: 3,
    manuallyScheduled: false,
  },
  {
    id: 'build',
    name: 'Build',
    startDate: '2026-04-01',
    durationDays: 2,
    manuallyScheduled: false,
  },
];

grid.ganttDependencies = [{
  id: 'design-build',
  predecessorTaskId: 'design',
  successorTaskId: 'build',
  type: 'finish-to-start',
  lagDays: 0,
}];

Expected result: design ends on 2026-04-03, so build is scheduled no earlier than 2026-04-04. If the user drags build left, the effective bar snaps back to the dependency-valid date.

Manual Successor Keeps Date and Warns

Manual tasks preserve authored dates, but dependency violations remain visible:

grid.source = [
  { id: 'design', startDate: '2026-04-01', durationDays: 3 },
  {
    id: 'review',
    name: 'Manual Review',
    startDate: '2026-04-02',
    durationDays: 1,
    manuallyScheduled: true,
  },
];

grid.ganttDependencies = [{
  id: 'design-review',
  predecessorTaskId: 'design',
  successorTaskId: 'review',
  type: 'finish-to-start',
  lagDays: 0,
}];

Expected result: review stays on 2026-04-02 and receives a manual-dependency-violation warning because the dependency requires 2026-04-04.

See the Advanced dependencies demo for a runnable project containing FS, SS, FF, and SF links with lag and lead.

Implementation sources:

• packages/enterprise/plugins/gantt/engine/dependency-graph.ts
• packages/enterprise/plugins/gantt/engine/scheduler-validation.ts
• packages/enterprise/plugins/gantt/features/dependencies/