Dependency Editing

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

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.

Implementation:

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