Editing, Validation, Diagnostics

Live example

Try moving Visual Design into the April 14–18 freeze window: the before-change handler rejects the move. Inspect the validation result and protected-row indicators, then open the Task Editing guide for the custom editor.

Source code

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

import { GanttPlugin } from '@revolist/gantt';
import { currentTheme } from '../composables/useRandomData';
import './gantt-example-recipes.css';
import {
  RECIPE_ASSIGNMENTS,
  RECIPE_CALENDARS,
  RECIPE_COLUMNS,
  RECIPE_DEPENDENCIES,
  RECIPE_GANTT_CONFIG,
  RECIPE_PANEL_ROWS,
  RECIPE_PANEL_SOURCE_REFERENCES,
  RECIPE_RESOURCES,
  RECIPE_ROW_CONTEXT_MENU,
  RECIPE_TASKS,
  attachRecipeValidation,
} from './GanttExampleRecipesShared';

const { isDark } = currentTheme();

function createPanel(): HTMLElement {
  const panel = document.createElement('aside');
  panel.className = 'gantt-recipe-panel';
  panel.innerHTML = `
    <div class="gantt-recipe-panel__header">
      <strong>Feature recipes</strong>
      <span>Live outputs from exported example helpers</span>
    </div>
    <dl class="gantt-recipe-panel__list">
      ${RECIPE_PANEL_ROWS.map((row) => `
        <div>
          <dt>${row.label}</dt>
          <dd>${row.value}</dd>
        </div>
      `).join('')}
    </dl>
    <div class="gantt-recipe-panel__sources">
      ${RECIPE_PANEL_SOURCE_REFERENCES.map((source) => `<code>${source}</code>`).join('')}
    </div>
  `;
  return panel;
}

export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) {
    return () => {};
  }

  const root = document.createElement('section');
  root.className = 'gantt-recipe-demo';
  const grid = document.createElement('revo-grid');
  grid.className = 'gantt-recipe-grid';
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  grid.plugins = [GanttPlugin];
  grid.columns = RECIPE_COLUMNS;
  grid.gantt = RECIPE_GANTT_CONFIG;
  grid.ganttDependencies = RECIPE_DEPENDENCIES;
  grid.ganttCalendars = RECIPE_CALENDARS;
  grid.ganttResources = RECIPE_RESOURCES;
  grid.ganttAssignments = RECIPE_ASSIGNMENTS;
  grid.rowContextMenu = RECIPE_ROW_CONTEXT_MENU;

  root.appendChild(grid);
  root.appendChild(createPanel());
  parent.appendChild(root);
  const detachValidation = attachRecipeValidation(grid);
  grid.source = RECIPE_TASKS;

  return () => {
    detachValidation();
    root.remove();
  };
}

<template>
  <section class="gantt-recipe-demo">
    <RevoGrid
      ref="gridRef"
      hide-attribution
      class="gantt-recipe-grid"
      :theme="isDark ? 'darkCompact' : 'compact'"
      :plugins="plugins"
      :source="tasks"
      :columns="columns"
      :gantt.prop="ganttConfig"
      :gantt-dependencies.prop="dependencies"
      :gantt-calendars.prop="calendars"
      :gantt-resources.prop="resources"
      :gantt-assignments.prop="assignments"
      :row-context-menu.prop="rowContextMenu"
    />
    <aside class="gantt-recipe-panel">
      <div class="gantt-recipe-panel__header">
        <strong>Feature recipes</strong>
        <span>Live outputs from exported example helpers</span>
      </div>
      <dl class="gantt-recipe-panel__list">
        <div v-for="row in panelRows" :key="row.label">
          <dt>{{ row.label }}</dt>
          <dd>{{ row.value }}</dd>
        </div>
      </dl>
      <div class="gantt-recipe-panel__sources">
        <code v-for="source in sourceReferences" :key="source">{{ source }}</code>
      </div>
    </aside>
  </section>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import RevoGrid from '@revolist/vue3-datagrid';
import { GanttPlugin } from '@revolist/gantt';
import { currentThemeVue } from '../composables/useRandomData';
import {
  RECIPE_ASSIGNMENTS,
  RECIPE_CALENDARS,
  RECIPE_COLUMNS,
  RECIPE_DEPENDENCIES,
  RECIPE_GANTT_CONFIG,
  RECIPE_PANEL_ROWS,
  RECIPE_PANEL_SOURCE_REFERENCES,
  RECIPE_RESOURCES,
  RECIPE_ROW_CONTEXT_MENU,
  RECIPE_TASKS,
  attachRecipeValidation,
} from './GanttExampleRecipesShared';

const { isDark } = currentThemeVue();
const gridRef = ref<{ $el?: HTMLRevoGridElement } | null>(null);
const plugins = [GanttPlugin];
const tasks = ref(RECIPE_TASKS);
const columns = ref(RECIPE_COLUMNS);
const dependencies = ref(RECIPE_DEPENDENCIES);
const calendars = ref(RECIPE_CALENDARS);
const resources = ref(RECIPE_RESOURCES);
const assignments = ref(RECIPE_ASSIGNMENTS);
const ganttConfig = computed(() => RECIPE_GANTT_CONFIG);
const rowContextMenu = computed(() => RECIPE_ROW_CONTEXT_MENU);
const panelRows = RECIPE_PANEL_ROWS;
const sourceReferences = RECIPE_PANEL_SOURCE_REFERENCES;
let detachValidation: (() => void) | undefined;

onMounted(() => {
  const grid = gridRef.value?.$el;
  if (grid) {
    detachValidation = attachRecipeValidation(grid);
  }
});

onBeforeUnmount(() => {
  detachValidation?.();
});
</script>

<style src="./gantt-example-recipes.css"></style>

import React, { useEffect, useMemo, useRef } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { GanttPlugin } from '@revolist/gantt';
import { currentTheme } from '../composables/useRandomData';
import {
  RECIPE_ASSIGNMENTS,
  RECIPE_CALENDARS,
  RECIPE_COLUMNS,
  RECIPE_DEPENDENCIES,
  RECIPE_GANTT_CONFIG,
  RECIPE_PANEL_ROWS,
  RECIPE_PANEL_SOURCE_REFERENCES,
  RECIPE_RESOURCES,
  RECIPE_ROW_CONTEXT_MENU,
  RECIPE_TASKS,
  attachRecipeValidation,
} from './GanttExampleRecipesShared';

const { isDark } = currentTheme();

export default function GanttExampleRecipes() {
  const gridRef = useRef<HTMLRevoGridElement | null>(null);
  const plugins = useMemo(() => [GanttPlugin], []);
  const columns = useMemo(() => RECIPE_COLUMNS, []);
  const gantt = useMemo(() => RECIPE_GANTT_CONFIG, []);
  const rowContextMenu = useMemo(() => RECIPE_ROW_CONTEXT_MENU, []);

  useEffect(() => {
    const grid = gridRef.current;
    return grid ? attachRecipeValidation(grid) : undefined;
  }, []);

  return (
    <section style={{
      display: 'grid',
      gridTemplateColumns: 'minmax(0, 1fr) 300px',
      gap: 16,
      minHeight: 540,
    }}>
      <RevoGrid
        ref={gridRef}
        style={{ minHeight: 540 }}
        theme={isDark() ? 'darkCompact' : 'compact'}
        hideAttribution
        plugins={plugins}
        source={RECIPE_TASKS}
        columns={columns}
        gantt={gantt}
        ganttDependencies={RECIPE_DEPENDENCIES}
        ganttCalendars={RECIPE_CALENDARS}
        ganttResources={RECIPE_RESOURCES}
        ganttAssignments={RECIPE_ASSIGNMENTS}
        rowContextMenu={rowContextMenu}
      />
      <aside style={{
        borderLeft: '1px solid #d8dee8',
        padding: '12px 0 12px 16px',
        font: '13px/1.4 system-ui, sans-serif',
      }}>
        <div style={{ display: 'grid', gap: 3, marginBottom: 14 }}>
          <strong>Feature recipes</strong>
          <span style={{ color: '#64748b' }}>Live outputs from exported example helpers</span>
        </div>
        <dl style={{ display: 'grid', gap: 10, margin: 0 }}>
          {RECIPE_PANEL_ROWS.map((row) => (
            <div key={row.label} style={{ display: 'grid', gap: 2 }}>
              <dt style={{ color: '#64748b' }}>{row.label}</dt>
              <dd style={{ margin: 0, fontWeight: 600 }}>{row.value}</dd>
            </div>
          ))}
        </dl>
        <div style={{ display: 'grid', gap: 5, marginTop: 18 }}>
          {RECIPE_PANEL_SOURCE_REFERENCES.map((source) => (
            <code key={source} style={{ whiteSpace: 'normal', fontSize: 11, color: '#475569' }}>{source}</code>
          ))}
        </div>
      </aside>
    </section>
  );
}

import { Component, NO_ERRORS_SCHEMA, ViewChild, ViewEncapsulation, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RevoGrid } from '@revolist/angular-datagrid';
import { GanttPlugin } from '@revolist/gantt';
import { currentTheme } from '../composables/useRandomData';
import {
  RECIPE_ASSIGNMENTS,
  RECIPE_CALENDARS,
  RECIPE_COLUMNS,
  RECIPE_DEPENDENCIES,
  RECIPE_GANTT_CONFIG,
  RECIPE_PANEL_ROWS,
  RECIPE_PANEL_SOURCE_REFERENCES,
  RECIPE_RESOURCES,
  RECIPE_ROW_CONTEXT_MENU,
  RECIPE_TASKS,
  attachRecipeValidation,
} from './GanttExampleRecipesShared';

@Component({
  selector: 'gantt-example-recipes-grid',
  standalone: true,
  schemas: [NO_ERRORS_SCHEMA],
  imports: [CommonModule, RevoGrid],
  template: `
    <section class="gantt-recipe-demo">
      <revo-grid
        #grid
        class="gantt-recipe-grid"
        [theme]="theme"
        [hideAttribution]="true"
        [plugins]="plugins"
        [source]="tasks"
        [columns]="columns"
        [gantt]="ganttConfig"
        [ganttDependencies]="dependencies"
        [ganttCalendars]="calendars"
        [ganttResources]="resources"
        [ganttAssignments]="assignments"
        [rowContextMenu]="rowContextMenu"
      ></revo-grid>
      <aside class="gantt-recipe-panel">
        <div class="gantt-recipe-panel__header">
          <strong>Feature recipes</strong>
          <span>Live outputs from exported example helpers</span>
        </div>
        <dl class="gantt-recipe-panel__list">
          <div *ngFor="let row of panelRows">
            <dt>{{ row.label }}</dt>
            <dd>{{ row.value }}</dd>
          </div>
        </dl>
        <div class="gantt-recipe-panel__sources">
          <code *ngFor="let source of sourceReferences">{{ source }}</code>
        </div>
      </aside>
    </section>
  `,
  styleUrls: ['./gantt-example-recipes.css'],
  encapsulation: ViewEncapsulation.None,
})
export class GanttExampleRecipesGridComponent implements AfterViewInit, OnDestroy {
  @ViewChild('grid', { read: ElementRef }) grid?: ElementRef<HTMLRevoGridElement>;

  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  plugins = [GanttPlugin];
  tasks = RECIPE_TASKS;
  columns = RECIPE_COLUMNS;
  ganttConfig = RECIPE_GANTT_CONFIG;
  dependencies = RECIPE_DEPENDENCIES;
  calendars = RECIPE_CALENDARS;
  resources = RECIPE_RESOURCES;
  assignments = RECIPE_ASSIGNMENTS;
  rowContextMenu = RECIPE_ROW_CONTEXT_MENU;
  panelRows = RECIPE_PANEL_ROWS;
  sourceReferences = RECIPE_PANEL_SOURCE_REFERENCES;
  private detachValidation?: () => void;

  ngAfterViewInit(): void {
    const grid = this.grid?.nativeElement;
    if (grid) {
      this.detachValidation = attachRecipeValidation(grid);
    }
  }

  ngOnDestroy(): void {
    this.detachValidation?.();
  }
}

import type { ContextMenuConfig } from '@revolist/revogrid-pro';
import type {
  GanttBeforeTaskChangeDetail,
  GanttPluginConfig,
  GanttTaskSourceRow,
  TaskEntity,
} from '@revolist/gantt';
import {
  createCustomTaskEditorFormRecipe,
  createCustomValidationRecipe,
  createGanttColumnPresetRecipe,
  createGanttTaskStatusIndicatorRecipe,
} from './recipes';
import { createGanttContextMenuExtensionItems } from '@revolist/gantt';
import {
  ASSIGNMENTS,
  CALENDAR_ID,
  DEPENDENCIES,
  GANTT_BASE_CONFIG,
  RESOURCES,
  STANDARD_CALENDAR,
  TASKS,
} from './shared/gantt-project-data';

export const RECIPE_GANTT_CONFIG = {
  ...GANTT_BASE_CONFIG,
  id: 'project-gantt-recipes',
  name: 'Gantt Feature Recipes',
  primaryCalendarId: CALENDAR_ID,
  updatedAt: '2026-04-06T00:00:00Z',
  statusDate: '2026-04-06',
  zoomPreset: 'week-month' as const,
  allowTaskCreate: true,
  visuals: {
    showTaskLabels: true,
    showTodayLine: true,
    shadeNonWorkingTime: true,
  },
} satisfies GanttPluginConfig;

const lockedTaskIds = ['t7'];
const taskById = new Map(TASKS.map((task) => [task.id, task]));
function toRecipeTask(task: GanttTaskSourceRow | undefined): TaskEntity | undefined {
  if (!task) {
    return undefined;
  }

  return {
    ...task,
    projectId: RECIPE_GANTT_CONFIG.id,
    parentId: task.parentId ?? null,
    wbsCode: '',
    type: task.type ?? 'task',
    workflowStatus: task.workflowStatus ?? 'not-started',
    duration: task.duration ?? 0,
    progressPercent: task.percentDone ?? 0,
    calendarId: String(task.calendarId ?? CALENDAR_ID),
    isCritical: false,
    tags: Array.isArray(task.tags) ? task.tags : [],
  } as TaskEntity;
}
const columnPreset = createGanttColumnPresetRecipe({ preset: 'core' });
const editorRecipe = createCustomTaskEditorFormRecipe({
  task: toRecipeTask(taskById.get('t4'))!,
  resources: RESOURCES,
  assignments: ASSIGNMENTS,
  fieldIds: ['name', 'startDate', 'endDate', 'progressPercent', 'resourceLabels'],
});
const statusIndicators = createGanttTaskStatusIndicatorRecipe({
  rows: TASKS.map((task) => ({ id: task.id })),
  lockedTaskIds,
});
const validationRecipe = createCustomValidationRecipe({
  context: {
    getTaskById: (taskId) => toRecipeTask(taskById.get(taskId)),
    roleContext: { roles: ['planner'] },
  },
  rolePolicy: {
    roles: {
      planner: ['task:move', 'task:resize', 'task:progress'],
    },
  },
  freezeWindows: [
    { startDate: '2026-04-14', endDate: '2026-04-18', label: 'design freeze' },
  ],
});

const validationDetail: GanttBeforeTaskChangeDetail = {
  action: 'move',
  taskId: 't4',
  changes: {
    startDate: '2026-04-15',
    endDate: '2026-04-18',
  },
  previousValues: {
    startDate: '2026-04-13',
    endDate: '2026-04-24',
  },
};
const validationDecision = validationRecipe.validate(validationDetail);

export const RECIPE_COLUMNS = columnPreset.columns;
export const RECIPE_TASKS = TASKS.map((task) =>
  lockedTaskIds.includes(task.id) ? { ...task, locked: true } : task);
export const RECIPE_DEPENDENCIES = DEPENDENCIES;
export const RECIPE_CALENDARS = [STANDARD_CALENDAR];
export const RECIPE_RESOURCES = RESOURCES;
export const RECIPE_ASSIGNMENTS = ASSIGNMENTS;
export const RECIPE_ROW_CONTEXT_MENU: ContextMenuConfig = {
  items: [
    ...createGanttContextMenuExtensionItems({
      duplicate: {
        icon: 'fa-solid fa-copy',
        copyName: (task) => `${task.name ?? 'Task'} copy`,
      },
      delete: false,
      assignResource: {
        icon: 'fa-solid fa-user-plus',
        name: 'Open assignment panel',
        onAssignResource: (context) => {
          context.revogrid.dispatchEvent(new CustomEvent('gantt-recipe-action', {
            bubbles: true,
            detail: { action: 'assign-resource', taskId: context.taskId },
          }));
        },
      },
      export: {
        icon: 'fa-solid fa-file-excel',
        name: 'Export task workbook',
        exportOptions: (context) => ({
          sheetName: context.task?.name ?? 'Gantt',
          workbookName: 'gantt-recipes.xlsx',
        }),
      },
    }),
  ],
};

export const RECIPE_PANEL_ROWS = [
  {
    label: 'Column preset',
    value: `${columnPreset.presetProps.length} core fields`,
  },
  {
    label: 'Editor form',
    value: `${editorRecipe.fields.length} fields for ${editorRecipe.initialValues.name}`,
  },
  {
    label: 'Status indicators',
    value: `${statusIndicators.filter((row) => row.status.indicators.length > 0).length} protected rows`,
  },
  {
    label: 'Validation result',
    value: validationDecision.ok ? 'Allowed' : validationDecision.message ?? 'Blocked',
  },
  {
    label: 'Row menu extensions',
    value: `${RECIPE_ROW_CONTEXT_MENU.items.length} custom actions`,
  },
] as const;

export const RECIPE_PANEL_SOURCE_REFERENCES = [
  'packages/gantt/src/gantt/features/context-menu/context-menu-extensions.ts',
  'examples/components/src/components/gantt/recipes/feature-helper-examples.ts',
  'examples/components/src/components/gantt/recipes/grid-projection-examples.ts',
  'examples/components/src/components/gantt/recipes/validation-recipes.ts',
] as const;

export function attachRecipeValidation(grid: HTMLRevoGridElement): () => void {
  const handler = validationRecipe.handler as unknown as EventListener;
  grid.addEventListener('gantt-before-task-change', handler);
  return () => grid.removeEventListener('gantt-before-task-change', handler);
}

These APIs are presentation-free. They make decisions and shape data, while your application owns forms, popovers, panels, toasts, and persistence.

The application recipes below live in the examples source browser. Copy their recipes/ files beside your code before using the relative imports; they are maintained examples rather than published Gantt exports.

1
import {
2
  GANTT_BEFORE_ASSIGNMENT_CHANGE_EVENT,
3
  GANTT_BEFORE_DEPENDENCY_CHANGE_EVENT,
4
  GANTT_BEFORE_TASK_CHANGE_EVENT,
5
  TASK_EDITOR_FIELD_SCHEMA,
6
  buildDependencyValidationSummary,
7
  buildResourceOverallocationSummary,
8
  createGanttRoleEditabilityHelpers,
9
  createTaskDetailPopoverModel,
10
  createTaskEditorFormValues,
11
  normalizeTaskEditorSubmit,
12
} from '@revolist/gantt';
13
import {
14
  createApprovalGateValidator,
15
  createForbiddenDateRangeValidator,
16
  createGanttBeforeTaskChangeValidationHandler,
17
  createLockedPhaseValidator,
18
  createRoleGuardValidator,
19
} from './recipes/validation-recipes';

Role-Based Editability

Before-change events are cancelable. Use role helpers to decide whether a task, dependency, or assignment mutation should proceed. Call event.preventDefault() to stop the packaged mutation before the Gantt store changes; timeline previews are cleared and the next render keeps the previous task, dependency, or assignment data.

1
const policy = {
2
  roles: {
3
    viewer: [],
4
    planner: ['task:*', 'dependency:create', 'dependency:delete'],
5
    staffing: ['assignment:edit'],
6
    admin: ['*'],
7
  },
8
  fallback: 'deny',
9
} as const;
10

11
const editability = createGanttRoleEditabilityHelpers(policy);
12
const getRoleContext = () => ({ roles: currentUser.roles });
13

14
grid.addEventListener(GANTT_BEFORE_TASK_CHANGE_EVENT, (event) => {
15
  if (!editability.canEditTask(event.detail, getRoleContext())) {
16
    event.preventDefault();
17
  }
18
});
19

20
grid.addEventListener(GANTT_BEFORE_DEPENDENCY_CHANGE_EVENT, (event) => {
21
  if (!editability.canEditDependency(event.detail, getRoleContext())) {
22
    event.preventDefault();
23
  }
24
});
25

26
grid.addEventListener(GANTT_BEFORE_ASSIGNMENT_CHANGE_EVENT, (event) => {
27
  if (!editability.canEditAssignment(event.detail, getRoleContext())) {
28
    event.preventDefault();
29
  }
30
});

Task before-change actions cover move, resize, create, edit, progress, split, indent, outdent, and delete. Dependency before-change actions cover create, delete, edit, and replace; replace is emitted by predecessor/successor inline field edits and includes previousDependencies plus proposed dependencies because one cell edit can add, update, and remove multiple links. Assignment edits emit proposed assignments and previousAssignments.

For task edits, event.detail.sourcePatch contains the flat source-row fields that the packaged Gantt store will write. Use it when persisting custom row fields or when your backend uses public source names such as duration, percentDone, and taskMode.

1
grid.addEventListener(GANTT_BEFORE_TASK_CHANGE_EVENT, (event) => {
2
  const { sourceIndex, sourcePatch, previousSourceValues } = event.detail;
3

4
  if (sourceIndex === undefined || !sourcePatch) {
5
    return;
6
  }
7

8
  queueTaskRowPersistence({
9
    rowIndex: sourceIndex,
10
    patch: sourcePatch,
11
    previousValues: previousSourceValues ?? {},
12
  });
13
});

Custom Task Editor Forms

Use the field schema and initial value builder to render a framework form, then normalize submitted values into a TaskUpdate patch.

For a complete standalone UI example, see Task Editing.

1
const fields = TASK_EDITOR_FIELD_SCHEMA.filter((field) =>
2
  ['name', 'startDate', 'endDate', 'progressPercent', 'resourceLabels'].includes(field.id),
3
);
4

5
const values = createTaskEditorFormValues(task, resources, assignments);
6

7
renderTaskEditor({
8
  fields,
9
  values,
10
  onSubmit(nextValues) {
11
    const result = normalizeTaskEditorSubmit(task, nextValues);
12

13
    if (!result.ok) {
14
      renderErrors(result.errors);
15
      return;
16
    }
17

18
    updateTask(task.id, result.patch);
19
  },
20
});

Task Detail Popovers

createTaskDetailPopoverModel() returns sections, fields, warnings, and resource labels. Your app handles hover/focus, positioning, and rendering.

1
const model = createTaskDetailPopoverModel({
2
  row,
3
  task,
4
  resources,
5
  assignments,
6
});
7

8
renderPopover({
9
  title: model.title,
10
  subtitle: model.subtitle,
11
  sections: model.sections,
12
  resources: model.resourceAssignments.map((assignment) => assignment.displayValue),
13
});

Dependency Diagnostics

Use dependency summaries to power badges, side panels, or task focus commands.

1
const summary = buildDependencyValidationSummary({
2
  conflicts: schedulerResult.conflicts,
3
  issues: schedulerResult.issues,
4
  rows: projectedRows,
5
});
6

7
renderDiagnosticsPanel({
8
  count: summary.totalCount,
9
  groups: summary.groups,
10
});

Resource Over-Allocation Diagnostics

Use resource summaries when staffing dashboards need to show who is overloaded and when.

1
const overloads = buildResourceOverallocationSummary({
2
  rows: resourcePlanningRows,
3
  loadSummaries: resourceLoadSummaries,
4
  conflicts: schedulerResult.conflicts,
5
});
6

7
renderResourceHealth({
8
  count: overloads.totalCount,
9
  peakOverloadUnits: overloads.peakOverloadUnits,
10
  groups: overloads.groups,
11
});

Custom Validation Recipes

Compose validators and attach the generated handler to gantt-before-task-change.

1
const validators = [
2
  createRoleGuardValidator({ policy }),
3
  createForbiddenDateRangeValidator({
4
    ranges: [{ startDate: '2026-05-20', endDate: '2026-05-27', label: 'release freeze' }],
5
  }),
6
  createLockedPhaseValidator({
7
    lockedPhaseIds: ['closed'],
8
    getPhaseId: (detail) => detail.taskId ? phaseByTaskId[detail.taskId] : null,
9
  }),
10
  createApprovalGateValidator({
11
    actions: ['move', 'resize', 'progress'],
12
    requiresApproval: (detail) => detail.changes.progressPercent === 100,
13
  }),
14
];
15

16
grid.addEventListener(
17
  GANTT_BEFORE_TASK_CHANGE_EVENT,
18
  createGanttBeforeTaskChangeValidationHandler({
19
    context: () => validationContext,
20
    validators,
21
    onReject: ({ decision }) => showValidationToast(decision.message ?? 'Change rejected'),
22
  }),
23
);