syncfusion-react-gantt-chart

What this skill does

# Syncfusion React Gantt Chart

The Syncfusion React Gantt Chart (`GanttComponent`) is a powerful project management component for visualizing, scheduling, and managing tasks over a timeline. It supports auto/manual scheduling, task dependencies, resource planning, interactive editing, Excel/PDF export, and rich customization.

## When to Use This Skill

- Implementing a Gantt chart or project timeline in a React app
- Configuring task scheduling (auto, manual, custom modes)
- Setting up task dependencies (FS, SS, FF, SF) and constraints (ASAP, MSO, FNET, etc.)
- Binding local or remote data to the Gantt (local array, DataManager, UrlAdaptor, Ajax)
- Customizing taskbars, labels, milestones, and baselines
- Configuring resources and resource views (including multi-taskbar)
- Enabling editing (dialog, cell, taskbar drag) with validation rules
- Setting up column resize, reorder, freeze, or column menu
- Configuring WBS codes, tree column icons, or serial number columns
- Setting up filtering, sorting, or selection
- Scrolling to specific dates or controlling scroll position programmatically
- Exporting Gantt to Excel or PDF
- Handling Gantt events and enabling advanced features (undo/redo, virtual scroll, critical path, etc.)
- Globalization, localization, and RTL support

---

## Documentation and Navigation Guide

### Getting Started
📄 **Read:** [references/getting-started.md](references/getting-started.md)
- Installation and package dependencies
- Vite / CRA project setup
- CSS theme imports (all 14 required packages)
- Basic `GanttComponent` with `taskFields` mapping
- Module injection guide (all available services)
- `gridLines` prop (`'Both'` / `'Horizontal'` / `'Vertical'` / `'None'`)
- First render walkthrough with minimal example, output summary, and common gotchas

### Data Binding
📄 **Read:** [references/data-binding.md](references/data-binding.md)
- Local array data binding
- Remote / AJAX data binding with `DataManager`
- Self-referential flat data
- `taskFields` configuration (id, name, startDate, endDate, duration, progress, child)
- Custom field mapping
- **UrlAdaptor** for server-side CRUD (`url` + `batchUrl`)
- **RemoteSaveAdaptor** for local rendering with server persistence
- Sending additional parameters to server via `Query.addParams()` in `load` event
- Binding with `Ajax` class (manual fetch)
- Load child on demand (`loadChildOnDemand={false}`, `hasChildMapping`)
- Handling HTTP errors with `actionFailure` event

### Task Scheduling
📄 **Read:** [references/task-scheduling.md](references/task-scheduling.md)
- Auto, Manual, and Custom scheduling modes (`taskMode`)
- Unscheduled tasks (duration-only, date-only, none)
- Project start date and end date configuration
- How scheduling mode affects parent task calculation
- Switching between modes dynamically

### Task Dependency
📄 **Read:** [references/task-dependency.md](references/task-dependency.md)
- Dependency types: Finish-to-Start (FS), Start-to-Start (SS), Finish-to-Finish (FF), Start-to-Finish (SF)
- Mapping `taskFields.dependency` in data source (string format: `"2FS"`, `"2FS+3d"`, `"2SS+2h"`)
- Multiple predecessors per task (comma-separated: `"2FS,3FS"`)
- Offset values with units: day, hour, minute (e.g., `"2FS+3h"`, `"2FS-1d"`)
- Drawing dependencies via UI (drag from taskbar connection points)
- Programmatic dependency management (`addPredecessor`, `removePredecessor`, `updatePredecessor`)
- Connector line customization (`connectorLineWidth`, `connectorLineBackground`)
- **Predecessor Offset Synchronization**
  - `autoUpdatePredecessorOffset={true}` — recalculate offsets on load to account for calendar rules (weekends, holidays)
  - `autoUpdatePredecessorOffset={false}` — display original offsets even if not matching rendered lines (visual inconsistency possible)
- **Offset Updates During Editing**
  - `updateOffsetOnTaskbarEdit={true}` — auto-recalculate offsets when dragging taskbars (default)
  - `updateOffsetOnTaskbarEdit={false}` — preserve offsets; manual update required via dependency dialog
- **Dependency Validation Modes** (in `actionBegin` event with `requestType === 'validateLinkedTask'`)
  - `respectLink={true}` — revert invalid edits to maintain dependency integrity
  - `removeLink={true}` — remove conflicting dependencies to allow edits
  - `preserveLinkWithEditing={true}` — update offsets to maintain links (default mode)
- **Validation Dialog** — disable all modes to show user-choice dialog (cancel edit, remove link, adjust offset)
- **Parent Dependencies** — `allowParentDependency={true}` allows cross-parent dependencies; `false` restricts to siblings only
- **Show/Hide Dependencies Dynamically** — toggle `.e-gantt-dependency-view-container` CSS visibility
- **Disable Validation** — `enablePredecessorValidation={false}` disables auto-date validation based on predecessor links

### Task Constraints
📄 **Read:** [references/task-constraints.md](references/task-constraints.md)
- Eight constraint types: ASAP, ALAP, MSO, MFO, SNET, SNLT, FNET, FNLT
- Mapping `taskFields.constraintType` and `taskFields.constraintDate`
- How constraints interact with dependencies and `taskMode`
- Editing constraints via dialog
- Validation and conflict handling

### Timeline and Zooming
📄 **Read:** [references/timeline.md](references/timeline.md)
- `timelineViewMode` quick presets (`Hour`, `Day`, `Week`, `Month`, `Year`)
- Top tier and bottom tier independent configuration (`unit`, `format`, `count`, `formatter`)
- Combining timeline cells using `count` (merge multiple units per cell)
- Custom timeline cell formatting using `formatter` (tier + mode aware)
- Timeline view dates with `viewStartDate` / `viewEndDate` (lock visible range)
- `weekStartDay` — controls which day starts a week column (0=Sun, 1=Mon…)
- Automatic timescale updates using `updateTimescaleView`
- Dynamic timeline mode change at runtime (update `timelineViewMode` + `refresh()`)
- Timeline cell tooltip visibility using `showTooltip`
- Timeline template customization using `timelineTemplate` ({ date, value, tier })
- Timeline navigation using `previousTimeSpan()` / `nextTimeSpan()`
- Zooming with toolbar (`ZoomIn`, `ZoomOut`, `ZoomToFit`)
- Customizing zoom steps with `zoomingLevels` (`ZoomTimelineSettings`)
- Programmatic zoom methods: `zoomIn()`, `zoomOut()`, `fitToProject()`
- Timeline cell width using `timelineUnitSize`
- Weekend handling:
  - Highlight weekends with `highlightWeekends={true}`
  - Hide weekends using `timelineSettings.showWeekend` (with noted limitations)

### Columns
📄 **Read:** [references/columns.md](references/columns.md)
- Column types overview (tree column, WBS, custom columns)
- Auto-generated columns (omit `ColumnsDirective`)
- Column rendering with `valueAccessor` (custom display values, concatenation)
- Expression columns (calculated values via `valueAccessor`)
- Display serial numbers via `rowDataBound`
- Tree column configuration (`treeColumnIndex`)
  - Customize expand/collapse icons (CSS override)
  - Customize indentation via `queryCellInfo`
  - `collapseAllParentTasks` — collapse all on load
  - `taskFields.expandState` — per-row initial expand/collapse
  - Persist expand/collapse state in `localStorage`
- WBS (Work Breakdown Structure) column
  - `enableWBS` + `enableAutoWbsUpdate` APIs
  - Manual WBS with `taskFields.wbsPredecessor`
- Column headers, format, and alignment
  - `headerTemplate` for custom header rendering
  - Header text wrapping (`treeGrid.textWrapSettings.wrapMode`)
  - Dynamic header text update (`getColumnByField` + `refreshHeader`)
- Column templates (custom cell rendering) and `editTemplate`
- Column spanning and frozen columns (`frozenColumns`, inject `Freeze`)

### Column Interactions
📄 **Read:** [references/column-interactions.md](references/column-interactions.md)
- Column resizing (`allowResizing`, inject `Resize`)
  - Restrict with `minWidth` / `maxWidth` per column
  - Prevent resize per column (`allowResizing={false}`)
  - Resize mode