syncfusion-react-gantt-chart

# 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.) - Configuring project calendars, task calendars, holidays, working time, and hours-per-day rules - 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, including hierarchy checkbox 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 - Theme package installation and CSS import via npm theme 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`) - Duration unit support: `Day`, `Hour`, `Minute`, `Week`, and `Month` - Mapping per-task duration units with `taskFields.durationUnit` - Duration values with embedded units (for example, `5 days`, `2 weeks`, `1 month`) - `daysPerWeek` and `daysPerMonth` conversion controls for week/month scheduling - How week/month durations interact with working time, weekends, holidays, and task calendars - 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 ### Taskbar Draw 📄 **Read:** [references/taskbar-draw.md](references/taskbar-draw.md) - `allowTaskbarDraw` API and required editing setup - Drawing a taskbar to create or schedule an unscheduled task - How the drawn range resolves `StartDate`, `EndDate`, and `Duration` - Behavior for fully unscheduled, partially scheduled, parent, child, milestone, and manual tasks - Interaction with taskbar editing, dialog editing, cell editing, validation, calendars, holidays, dependencies, resources, and task calendars - Practical examples, limitations, and best practices ### 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 - **Allowed Dependency Types** — `allowedDependencyTypes={['FS', 'SF']}` restricts which dependency types can be loaded, created, and edited - **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 }) - Infinite timeline scrolling using `enableInfiniteTimelineScroll` (extends the visible range while navigating with horizontal scrollbar or scroll arrows) - 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`) - Serial Number column configuration (`enableSerialNumber` + `field: 'SerialNumber'`) - Serial number behavior during sort, filter, search, expand/collapse, add/edit/delete, drag-and-drop, refresh, and virtualization - 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 modes: Normal vs Auto (`resizeSettings.mode`) - Programmatic resize (`reorderColumns`, `refreshColumns`) - Resize events: `resizeStart`, `resizing`, `resizeStop` - Column reorder (`allowReordering`, inject `Reorder`) - Disable reorder per column (`allowReordering={false}`) - Programmatic reorder: `reorderColumns`, `reorderColumnByIndex`, `reorderColumnByTargetIndex` - Reorder drag events: `columnDragStart`, `columnDrag`, `columnDrop` - Column menu (`showColumnMenu`, inject `ColumnMenu`) - Built-in items: SortAscending, SortDescending, AutoFit, AutoFitAll, ColumnChooser, Filter - Custom column menu items + `columnMenuClick` event - Disable per column (`showColumnMenu={false}`) - Toggling column visibility (show/hide columns) ### Rows 📄 **Read:** [references/rows.md](references/rows.md) - Row drag-and-drop (reorder and reparent tasks) - Indent and outdent (change task hierarchy) - Row spanning via `queryCellInfo` event - `QueryCellInfoEventArgs` with `rowSpan`, `colSpan`, `cell`, `data`, `column` - Horizontal spanning (`colSpan`) and vertical spanning (`rowSpan`) - Row height configuration - Row styling via `rowDataBound` - Expand and collapse rows programmatically ### Managing Tasks 📄 **Read:** [references/managing-tasks.md](references/managing-tasks.md) - Adding new tasks (toolbar, context menu, programmatic `addRecord()`) - Editing tasks — dialog edit (`mode: 'Dialog'`), cell edit (`mode: 'Auto'`), taskbar drag - Taskbar draw creation for unscheduled tasks (`allowTaskbarDraw`) - How drawn taskbars generate or update `StartDate`, `EndDate`, and `Duration` - Behavior for fully unscheduled, partially scheduled, parent, child, milestone, and manual tasks - Interactions with taskbar editing, dialog editing, cell editing, validation, calendars, holidays, dependencies, and resources - Deleting tasks (toolbar, `deleteRecord()`, `showDeleteConfirmDialog`) - Taskbar drag editing: move, resize right edge, progress handle, dependency drawing - Splitting and merging tasks (`taskFields.segments`, `splitTask()`, `mergeTask()`) - **Cell edit types** (`editType`): `stringedit`, `numericedit`, `datepickeredit`, `datetimepickeredit`, `dropdownedit`, `booleanedit` - `edit.params` for min/max/step/format/dataSource per column - Customizing add/edit dialog fields (`addDialogFields`, `editDialogFields`) - Server-side CRUD with `UrlAdaptor` (`url` + `batchUrl`) - Server receives `added`, `changed`, `deleted` arrays in the batch request body - Column-level validation rules (`validationRules` on `ColumnDirective`) - Built-in rules: `required`, `min`, `max`, `minLength`, `date`, `regex` - Custom validator functions (`[fn, 'message']` callback pattern) ### Filtering and Searching 📄 **Read:** [references/filtering-searching.md](references/filtering-searching.md) - Basic column filtering (`allowFiltering={true}`, inject `Filter`) - Filter hierarchy modes: `Parent`, `Child`, `Both`, `None` - Filter menu (string, number, date operators) and Excel-like checklist filter - Toolbar search box (`searchSettings`: `fields`, `operator`, `ignoreCase`) - Initial filter state on load (`filterSettings.columns` array) - Programmatic filter API: `filterByColumn()`, `clearFiltering()` - Custom multi-column filter predicates ### Sorting 📄 **Read:** [references/sorting.md](references/sorting.md) - Single-column and multi-column sorting - Initial sort state (`sortSettings`) - Custom sort comparers - Programmatic sorting API ### Selection 📄 **Read:** [references/selection.md](references/selection.md) - Row selection modes (single, multiple) - Cell selection - Checkbox selection with hierarchy propagation modes (`Self`, `Hierarchy`, `FilteredHierarchy`) - Keyboard-based selection - Programmatic selection API (`selectRow`, `selectCell`) ### Taskbar, Labels, and Markers 📄 **Read:** [references/taskbar-labels-markers.md](references/taskbar-labels-markers.md) - Taskbar template (custom rendering) - Parent taskbar and milestone customization - Tooltip settings and templates (`tooltipSettings` for taskbar, connector line, baseline, timeline) - Disable/hide tooltips for specific UI targets using `beforeTooltipRender` - Left, right, and task label configuration - Data markers / indicators - Event markers (deadlines, holidays on timeline) - Baseline rendering - Baseline template customization using `baselineTemplate` - Critical path highlighting ### Resources 📄 **Read:** [references/resources.md](references/resources.md) - Defining resource collection (`resources` property) - Assigning resources to tasks (`taskFields.resourceInfo`) — single or multiple with custom units - Resource view layout (`viewType='ResourceView'`, resource groups) - Multi-taskbar (`enableMultiTaskbar={true}`) — multiple taskbars per collapsed resource row - Over-allocation highlighting (`showOverAllocatedTasks={true}`) - Resource unit and work fields (`resourceFields.unit`, `resourceFields.group`) - Custom resource taskbar styling via `queryTaskbarInfo` ### Toolbar 📄 **Read:** [references/toolbar-context-menu.md](references/toolbar-context-menu.md) - Built-in toolbar items: `Add`, `Edit`, `Delete`, `Update`, `Cancel`, `Search`, `ExpandAll`, `CollapseAll`, `Indent`, `Outdent`, `PrevTimeSpan`, `NextTimeSpan`, `ZoomIn`, `ZoomOut`, `ZoomToFit`, `CriticalPath`, `ExcelExport`, `CsvExport`, `PdfExport`, `ColumnChooser`, `Undo`, `Redo`, `SplitTask`, `MergeTask`