Dependency Editing

Source code

TypeScript

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

<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

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

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;
}

Dependency editing supports:

• Drag-to-create links from dependency handles.
• Allowed-type filtering via gantt.allowedDependencyTypes.
• Hover/select styling and inline delete UI.
• Keyboard delete on selected dependency.

Mobile And Touch Devices

On touch devices, dependency handles follow the same select-then-edit model as task-bar editing:

• Tap a task bar to select it.
• Gantt reveals larger dependency handles on the selected bar.
• Drag from a visible start or end dependency handle to another task bar.
• If the pointer lands on a target handle, Gantt uses that explicit endpoint.
• If the pointer lands on the target bar but not a handle, Gantt infers start or end from the pointer position relative to the bar midpoint.

Hidden dependency handles are not hit-testable on coarse pointers, so a swipe near the edge of an unselected task does not start dependency creation. This keeps timeline scrolling usable on phones and tablets while preserving precise dependency editing after task selection.

Implementation:

• features/dependencies/drag-controller.ts
• features/dependencies/dependency-tool.ts
• features/dependencies/dependency-layer.ts