Split Tasks

Source code

TypeScript ts

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

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

Vue vue

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

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

React tsx

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

export default function GanttSplitTasks() {
  return <GanttAdvancedDemo demo={GANTT_SPLIT_TASKS_DEMO} />;
}

Angular ts

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

@Component({
  selector: 'gantt-split-tasks-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 GanttSplitTasksGridComponent extends GanttAdvancedAngularBase {
  protected readonly demo = GANTT_SPLIT_TASKS_DEMO;
}

Use splitRanges to pause work inside a task:

{
  id: 'qa',
  name: 'QA',
  startDate: '2026-04-01',
  durationDays: 4,
  splitRanges: [{ startDate: '2026-04-03', endDate: '2026-04-04' }],
}

The scheduler extends the computed finish by the split duration so the task retains its planned working duration. Resource allocation checks skip split dates, and task bars render split ranges as visible gaps.

Timeline Split Editing

• Create: Alt-drag inside a regular task bar.
• Move: Drag an existing split gap.
• Remove: Double-click a split gap.

Example: Split Task with Resource Allocation

grid.source = [{
  id: 'qa',
  startDate: '2026-04-01',
  durationDays: 4,
  splitRanges: [{ startDate: '2026-04-03', endDate: '2026-04-04' }],
}];

Expected result: the task keeps four working days of duration, but its computed finish extends. Resource allocation checks skip 2026-04-03 and 2026-04-04.