syncfusion-angular-gantt-chart

What this skill does

# Syncfusion Angular Gantt Chart

A comprehensive skill for implementing and configuring the Syncfusion Angular Gantt Chart component (`ejs-gantt`). This covers everything from initial setup through advanced features like critical path, virtual scrolling, resource views, undo/redo, state persistence, localization, and export.

## When to Use This Skill

Use this skill when you need to:
- Install and set up the Angular Gantt Chart component
- Bind local or remote data to the Gantt chart
- Configure task scheduling modes (Auto/Manual/Custom)
- Define task dependencies and predecessor relationships
- Add, edit, or delete tasks (cell, dialog, taskbar editing)
- Assign and manage resources
- Configure timelines, zooming, and tier formats
- Customize taskbars, labels, and data markers
- Filter, sort, search, or select rows/cells
- Enable toolbar, context menu, or undo/redo
- Export to Excel or PDF
- Implement virtual scrolling or state persistence
- Apply localization, RTL layout, or timezone configuration
- Work with holidays, event markers, critical path, or baseline

---

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation via `ng add @syncfusion/ej2-angular-gantt`
- CSS imports for all themes (material3, bootstrap5, fluent2, tailwind3)
- Setting up Angular standalone component with `imports` and `providers`
- Binding data with `dataSource` and `taskFields` — self-referential vs hierarchical
- Injecting feature services (EditService, FilterService, ToolbarService, etc.)
- Configuring timeline, toolbar, editing, filtering, sorting
- `gridLines` values: `'Both'` | `'Horizontal'` | `'Vertical'` | `'None'`
- `actionFailure` error handling for common configuration mistakes

### Data Binding
📄 **Read:** [references/data-binding.md](references/data-binding.md)
- **Default pattern:** Self-referential flat array with `id` + `parentID` (idMapping + parentIdMapping) — use this unless user explicitly asks for nested data
- Hierarchical local data with `child` array — only when user explicitly requests nested/tree structure
- Decision table: when to use self-referential vs hierarchical
- Remote data binding with `DataManager` and adaptors (ODataV4, WebApiAdaptor, UrlAdaptor)
- Load-on-demand (virtual loading) with `loadChildOnDemand` and `hasChildMapping`
- Observable / RxJS data binding with `async` pipe
- Remote CRUD with `crudUrl`, `insertUrl`, `updateUrl`, `removeUrl`, `batchUrl`
- Common gotchas table (missing `isPrimaryKey`, wrong adaptor, parent date issues)

### Task Scheduling
📄 **Read:** [references/task-scheduling.md](references/task-scheduling.md)
- `taskMode`: `'Auto'` (default), `'Manual'`, `'Custom'` (per-task via boolean field)
- Auto mode: dates calculated from dependencies, working time, and holidays
- Manual mode: all dates fixed as-is in data source; use `validateManualTasksOnLinking` to still adjust on link
- Custom mode: per-task scheduling via mapped boolean field in data source
- Unscheduled tasks (`allowUnscheduledTasks`) — partial dates, floating bars
- `durationUnit`: `'Day'` | `'Hour'` | `'Minute'`
- **Working days:** `workWeek` array (default Mon–Fri); `includeWeekend: true` makes all 7 days working
- **Working hours:** `dayWorkingTime` — array of `{ from, to }` ranges (default 8–17); affects hour-based durations
- Baseline dates (`renderBaseline`, `baselineStartDate`, `baselineEndDate`, `baselineColor`)
- Work scheduling (effort-driven) with `work` field and `workUnit`

### Task Dependencies
📄 **Read:** [references/task-dependencies.md](references/task-dependencies.md)
- Dependency types: `FS` (Finish-to-Start), `SS`, `FF`, `SF` — format: `'2FS'`, `'3SS+1d'`
- Comma-separated multiple predecessors: `'2FS,3SS'`
- Predecessor lag/lead offsets with `d`/`h`/`m` units
- `autoUpdatePredecessorOffset` — sync offset values with actual positions on load
- `allowParentDependency` — enable parent-child and cross-hierarchy dependencies
- Editing via connector line drag when `editSettings.allowTaskbarEditing: true`
- `actionBegin` `requestType: 'validateLinkedTask'` — handle dependency conflicts
- Programmatic: `addPredecessor()`, `removePredecessor()`, `updateRecordById()`
- `connectorLineWidth` and `connectorLineBackground` for connector styling

### Task Constraints
📄 **Read:** [references/task-constraints.md](references/task-constraints.md)
- 8 constraint types: ASAP (0), ALAP (1), MSO (2), MFO (3), SNET (4), SNLT (5), FNET (6), FNLT (7)
- Map via `taskFields.constraintType` (numeric) and `taskFields.constraintDate` (Date)
- Constraints enforced only in Auto mode; stored-but-passive in Manual mode
- Conflicts with dependencies surface in `actionBegin` event

### Managing Tasks
📄 **Read:** [references/managing-tasks.md](references/managing-tasks.md)
- `editSettings`: `allowEditing`, `allowAdding`, `allowDeleting`, `allowTaskbarEditing`, `mode` (`'Auto'` | `'Dialog'`)
- Cell editing with `editType` per column: `'numericedit'`, `'defaultedit'`, `'dropdownedit'`, `'booleanedit'`, `'datepickeredit'`
- Dialog editing with custom tab configuration (`addDialogFields`, `editDialogFields`)
- Programmatic: `addRecord()`, `updateRecordById()`, `deleteRecord()`, `openAddDialog()`, `openEditDialog(id)`
- Expand/collapse: `expandAll()`, `collapseAll()`, `expandByID(id)`, `collapseByID(id)`; events: `expanding`, `expanded`, `collapsing`, `collapsed`
- Validation via `actionBegin` event (`args.cancel = true` to block)
- Server CRUD via `actionComplete` + `requestType` inspection
- Indent / outdent hierarchy changes via toolbar or `indent()` / `outdent()` methods

### Splitting and Merging Tasks
📄 **Read:** [references/splitting-and-merging.md](references/splitting-and-merging.md)
- `taskFields.segments` for hierarchical data; `taskFields.segmentId` for self-referential data
- Split at load time or dynamically via dialog Segments tab or context menu `SplitTask`
- Merge via context menu `MergeTask` or by dragging segments together
- `onTaskbarClick` with `segmentIndex` to detect which segment was clicked
- Limitations: no splits on parent/milestone tasks; incompatible with multi-taskbar resource view

### Resources
📄 **Read:** [references/resources.md](references/resources.md)
- `resources` (data) + `resourceFields` (field mapping: `id`, `name`, `unit`, `group`)
- `taskFields.resourceInfo` to link resources to tasks
- Resource view mode (`viewType: 'ResourceView'`) with row-per-resource display
- `showOverAllocationAsMultiTaskbar` — stacked taskbars for over-allocated resources
- `allowTaskbarOverlap` — controls overlapping vs stacked taskbars in resource rows (and affects same-resource dependency rendering)
- Work-based scheduling: `work` field, `taskType` (`'FixedWork'`, `'FixedDuration'`, `'FixedUnit'`)
- Work unit: `workUnit: 'Hour'` | `'Day'` | `'Minute'`

### Columns
📄 **Read:** [references/columns.md](references/columns.md)
- Column `field`, `headerText`, `width`, `format`, `type`, `template`, `headerTemplate`
- Column reordering (`allowReordering`), resizing (`allowResizing`)
- Frozen columns (`freeze: 'Left'` | `'Right'`) — requires `FreezeService`
- Column spanning via `queryCellInfo`
- `treeColumnIndex` for tree expand/collapse column
- WBS (Work Breakdown Structure) column with `columnType: 'WBS'`
- Column menu (`showColumnMenu`) — sort, filter, auto-fit, column chooser
- `isPrimaryKey` requirement for CRUD operations

### Timeline
📄 **Read:** [references/timeline.md](references/timeline.md)
- `timelineSettings` configuration
- Top tier and bottom tier customization
- Timeline view modes (day/week/month/year)
- Formatter function with `(date, format, tier, mode)` parameters
- Timeline cell width (`timelineUnitSize`)
- Custom date formats
- `projectStartDate` and `projectEndDate`
- Timeline view window (`viewStartDate` / `viewEndDate`)
- Week start day (`weekStartDay`)
- Automatic timescale update (`updateTimescaleView`)
- Weekend highlighting (