syncfusion-javascript-gantt-chart

# Implementing Syncfusion Gantt Chart A comprehensive skill for implementing the Syncfusion Essential JS 2 Gantt Chart component in JavaScript/TypeScript projects. Covers everything from initial setup to advanced features like critical path, resource management, virtual scrolling, and export. ## When to Use This Skill Use this skill when the user needs to: - **Set up** the Syncfusion Gantt Chart from scratch (installation, dependencies, basic init) - **Bind data** (local hierarchical, flat/self-referential, remote DataManager, load-on-demand) - **Configure task scheduling** (auto/manual/custom modes, week/month duration units, milestones, constraints, daysPerWeek/daysPerMonth) - **Configure calendars** (project calendar, task calendars, working time, holidays, exceptions, hoursPerDay) - **Define columns** (custom columns, templates, frozen, WBS, serial number column, checkbox, responsive) - **Manage resources** (assign resources, resource view, multi-taskbar, work/task types) - **Configure timeline** (top/bottom tiers, zooming, formatting) - **Enable editing** (cell, dialog, taskbar drag/resize, taskbar draw for creating unscheduled tasks, dependency editing, indent/outdent) - **Implement filtering, sorting, searching** on Gantt grid - **Show task dependencies** (FS, SS, FF, SF, offsets, restrict dependency types via allowedDependencyTypes, connector lines) - **Configure selection** (row, cell, checkbox selection with hierarchyCheckboxMode for parent-child propagation) - **Display critical path**, baseline, event markers, holidays, data markers, labels - **Export** to Excel or PDF - **Implement toolbar, context menu, undo/redo** - **Handle events**, state persistence, localization, RTL, timezone - **Optimize performance** (virtual scroll, immutable mode, loading animation) ## Quick Start ```typescript import { Gantt, Edit, Filter, Sort, Toolbar } from '@syncfusion/ej2-gantt'; Gantt.Inject(Edit, Filter, Sort, Toolbar); let gantt: Gantt = new Gantt({ dataSource: [ { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2024'), EndDate: new Date('04/21/2024'), subtasks: [ { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50 }, { TaskID: 3, TaskName: 'Soil test approval', StartDate: new Date('04/02/2024'), Duration: 4, Predecessor: '2FS', Progress: 50 } ] } ], height: '450px', taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', endDate: 'EndDate', duration: 'Duration', progress: 'Progress', dependency: 'Predecessor', child: 'subtasks' }, toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search'], editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true }, allowSorting: true, allowFiltering: true }); gantt.appendTo('#Gantt'); ``` ## Navigation Guide ### Setup & Installation 📄 **Read:** [references/getting-started.md](references/getting-started.md) - npm installation, webpack setup - Basic Gantt initialization (app.ts + index.html) - taskFields mapping, module injection - Error handling with actionFailure ### Data Binding 📄 **Read:** [references/data-binding.md](references/data-binding.md) - Local hierarchical and self-referential (flat) data - Remote data (DataManager, WebApiAdaptor, UrlAdaptor) - Load child on demand - Ajax binding, split tasks (segments) ### Task Scheduling 📄 **Read:** [references/task-scheduling.md](references/task-scheduling.md) - `taskMode`: `'Auto'` (default) / `'Manual'` / `'Custom'` — controls date validation behaviour - Auto: parent taskbar derived from child min/max dates; dependencies shift successors automatically - Manual: user controls all dates; no recalculation; `validateManualTasksOnLinking: true` enables predecessor-based validation only - Custom: per-task scheduling via `taskFields.manual` boolean field in data source - Unscheduled tasks: `allowUnscheduledTasks: true` — tasks with only start date, only end date, only duration, or none; if `false`, defaults to duration 1 from `projectStartDate` - Duration units: `durationUnit` (project-wide: `'Day'`/`'Hour'`/`'Minute'`/`'Week'`/`'Month'`); per-task via `taskFields.durationUnit` field or inline string (`'4hours'`, `'30min'`, `'2weeks'`, `'1month'`) - Week and Month duration units: daysPerWeek (default: 5), daysPerMonth (default: 20) — conversion factors for week/month to day - Milestones: `Duration: 0` renders a diamond shape - `projectStartDate` / `projectEndDate` — constrain chart range; auto-calculated if omitted - `dayWorkingTime` — define working hour ranges (default: 8–12 and 13–17); used for auto-scheduling calculations - `weekWorkingTime` — per-day-of-week working hours; overrides `dayWorkingTime` for listed days; unlisted days fall back to `dayWorkingTime` - `workWeek` — specify working days (default: Mon–Fri); `includeWeekend: true` makes Sat/Sun working days - `highlightWeekends: true` — visually shade non-working days in chart ### Task Constraints 📄 **Read:** [references/task-constraints.md](references/task-constraints.md) - Constraint types: ASAP(0), ALAP(1), MSO(2), MFO(3), SNET(4), SNLT(5), FNET(6), FNLT(7) - constraintType and constraintDate field mapping in taskFields - Benefits: enforce task sequences, anchor milestones, prevent resource conflicts - Handle constraint violations via actionBegin (requestType: 'validateTaskViolation') - validateMode flags: respectMustStartOn, respectMustFinishOn, respectStartNoLaterThan, respectFinishNoLaterThan - Constraint interaction with taskMode (Auto / Manual / Custom) - Editing constraints via dialog editor or programmatically (updateRecordByID) ### Task Dependency 📄 **Read:** [references/task-dependency.md](references/task-dependency.md) - FS, SS, FF, SF types with lag/lead offsets (day/hour/minute units) - allowParentDependency, multiple predecessors (comma-separated) - Connector line customization (connectorLineWidth, connectorLineBackground) - addPredecessor / removePredecessor / updatePredecessor methods - Validation modes (respectLink, removeLink, preserveLinkWithEditing) via actionBegin - Validation dialog when all modes are disabled - autoUpdatePredecessorOffset — sync offsets against calendar rules on initial load - updateOffsetOnTaskbarEdit: false — preserve offsets during taskbar drag - Show/hide dependency lines dynamically via .e-gantt-dependency-view-container - enablePredecessorValidation: false — draw lines without enforcing scheduling - allowedDependencyTypes — restrict which dependency types are permitted (FS/SS/FF/SF) ### Calendar Settings 📄 **Read:** [references/calendar-settings.md](references/calendar-settings.md) - calendarSettings (projectCalendar, taskCalendar) - Project calendar: workingTime, holidays, exceptions - Task calendars: assign custom calendars via taskFields.calendarId - Calendar behavior affecting task scheduling, duration, dependencies - hoursPerDay — working hours per display day (default: 8) - workWeek, includeWeekend for working day configuration - Calendar interaction with dependencies, resources, task editing, taskbar editing - Limitations, best practices, calendar examples ### Critical Path 📄 **Read:** [references/critical-path.md](references/critical-path.md) - enableCriticalPath property - Slack calculation (zero/negative slack) - Visual highlighting and CPM principles ### Baseline 📄 **Read:** [references/baseline.md](references/baseline.md) - renderBaseline, baselineColor - baselineStartDate, baselineEndDate, baselineDuration - Baseline milestones, CSS customization - Customizing via `queryTaskbarInfo` event (e.g., gradient styling) - `baselineTemplate` for custom HTML structure, including multiple baseline rendering - Return empty string from template for parent rows (`hasChildRecords`) ### Resources 📄 **Read:** [references/resources.md](references/resources.md) - resourceFields mapping, resources collection - Assigning resources to tasks, resource units - Over-allocation, resource templates - Custom column template + queryTaskbarInfo for per-resource badge and taskbar colors ### Resource View 📄 **Read:** [references/resource-view.md](references/resource-view.md) - viewType: 'ResourceView' - showOverAllocation - Resource grouping and display - Unassigned tasks grouped automatically at bottom - Taskbar drag and drop between resources (allowTaskbarDragAndDrop + RowDD module) ### Resource Multi Taskbar 📄 **Read:** [references/multi-taskbar.md](references/multi-taskbar.md) - enableMultiTaskbar for collapsed resource rows - Overlapping task visualization - Editing tasks in collapsed state ### Work & Task Types 📄 **Read:** [references/work.md](references/work.md) - taskFields.work mapping, workUnit (Hour/Day/Minute) - FixedWork, FixedDuration, FixedUnit task types ### Columns 📄 **Read:** [references/columns.md](references/columns.md) - columns array definition, treeColumnIndex - Serial Number Column: enableSerialNumber, field: 'SerialNumber' — auto-generated sequential row numbers that recalculate on sort, filter, paging, drag-drop - Checkbox columns, responsive columns - Column spanning, column templates - WBS column (enableWBS, enableAutoWbsUpdate) ### Column Operations 📄 **Read:** [references/column-operations.md](references/column-operations.md) - Column resizing (allowResizing, Resize module) - Column reordering (allowReordering, Reorder module) - Column menu (showColumnMenu) - Frozen/pinned columns (frozenColumns) ### Timeline 📄 **Read:** [references/timeline.md](references/timeline.md) - topTier / bottomTier units and format - timelineSettings configuration - Custom timeline formatting, timeline tooltip - Infinite timeline scrolling with enableInfiniteTimelineScroll ### Zooming 📄 **Read:** [references/timeline.md](references/timeline.md) - ZoomIn, ZoomOut, ZoomToFit toolbar items - zoomingLevels configuration - Programmatic zoom control ### Sorting 📄 **Read:** [references/sorting.md](references/sorting.md) - `allowSorting: true` + `Sort` module injection - Click header to sort; Ctrl+click for multi-column sort; Shift+click to remove column from multi-sort - Initial sort via `sortSettings.columns` array (field + direction) - Programmatic sort: `gantt.sortModule.sortColumn(field, direction, isMultiSort)`; clear all: `gantt.clearSorting()` - Sort events: `actionBegin` / `actionComplete` with `args.requestType === 'sorting'` - Disable sort for specific column: `columns.allowSorting: false` - Custom columns (string/numeric) sortable via `sortSettings` or programmatically - Touch: tap header to sort; popup appears for multi-column sort on touch devices ### Filtering 📄 **Read:** [references/filtering.md](references/filtering.md) - allowFiltering, Filter module - Menu filter and Excel-like filter - Column-level filtering, searching ### Selection 📄 **Read:** [references/selection.md](references/selection.md) - `allowSelection: false` disables all selection; `Selection` module required - `selectionSettings.mode`: `'Row'` (default) / `'Cell'` / `'Both'` - `selectionSettings.type`: `'Single'` (default) / `'Multiple'` (Ctrl+click for multi-select) - `selectionSettings.enableToggle: true` — click selected item again to deselect - Checkbox selection: add column with `type: 'checkbox'`; works with hierarchical data - `hierarchyCheckboxMode`: `'Self'` / `'Hierarchy'` (default) / `'FilteredHierarchy'` — controls propagation of checkbox selection in parent-child hierarchies - `enableHover: true` — highlights rows, taskbars, header cells, and timeline cells on hover - Row selection: `selectedRowIndex` for initial load; `selectRow(index)` / `selectRows([indexes])` for dynamic selection - Prevent row selection: `rowSelecting` event with `args.cancel = true`; `rowDeselecting` to prevent deselection - Cell selection: `mode: 'Cell'`; `selectCell({ rowIndex, cellIndex })` for dynamic selection; `getSelectedRowCellIndexes()` returns `{ cellIndexes, rowIndex }[]` - Prevent cell selection: `cellSelecting` event with `args.cancel = true`; `cellSelected` fires after - Select rows by condition in `dataBound` via `gantt.treeGrid.grid.dataSource` + `gantt.selectRows(indexes)` - `getSelectedRowIndexes()` → `number[]`; `getSelectedRecords()` → `object[]` - `gantt.clearSelection()` — clears all selected rows and cells - Touch: tap to select a row; tap popup to enter multi-row select mode, then tap additional rows - Cell selection not supported with `enableVirtualization` ### Rows 📄 **Read:** [references/rows.md](references/rows.md) - Customize row styles via rowDataBound event, CSS (.e-altrow, .e-selectionbackground), and treeGrid methods - Style parent vs child rows using hasChildRecords in rowDataBound - autoFocusTasks — scroll chart to taskbar when a row is clicked - rowHeight — uniform row height; per-row height via args.rowHeight in rowDataBound - Row hover with custom actions using dataBound + mouseover + Tooltip - Add rows programmatically via gantt.addRecord(data, position, index) — Top/Bottom/Above/Below/Child - Show/hide rows dynamically via treeGrid.getRowByIndex() + CSS display toggle - Row spanning via args.rowSpan in queryCellInfo (combine with colSpan for 2D merge) ### Row Drag, Drop, Indent and Outdent 📄 **Read:** [references/rows-drag-drop.md](references/rows-drag-drop.md) - RowDD module, allowRowDragAndDrop — drag rows within the Gantt - Drop positions: above (top border), below (bottom border), child (both borders) - Drag rows to external component via treeGrid.rowDropSettings.targetID in load event - Multi-row drag via selectionSettings.type: 'Multiple' - allowTaskbarDragAndDrop — reorder rows by dragging their taskbar - Programmatic reorder via gantt.reorderRows(fromIndexes, toIndex, position) - Drag lifecycle events: rowDragStartHelper, rowDragStart, rowDrag, rowDrop - Prevent child drop position using dropPosition === 'middleSegment' + reorderRows - Indent/Outdent toolbar items and gantt.indent() / gantt.outdent() methods - Programmatic indent/outdent: selectRow(i) then indent()/outdent() - Detect indent/outdent via actionComplete (args.requestType === 'indented'/'outdented') ### Managing Tasks (Editing) 📄 **Read:** [references/managing-tasks.md](references/managing-tasks.md) - editSettings (allowAdding, allowEditing, allowDeleting, allowTaskbarEditing) - Cell / Dialog / Taskbar editing modes - Add, delete, indent/outdent, drag-and-drop rows - Server-side CRUD, split/merge tasks, validation ### Taskbar Draw (Create Tasks by Drawing) 📄 **Read:** [references/taskbar-draw.md](references/taskbar-draw.md) - `allowTaskbarDraw: true` in editSettings — enables drawing taskbars on the timeline to create or schedule unscheduled tasks - Workflow: identify unscheduled task → click and drag on timeline → Gantt auto-calculates StartDate, EndDate, Duration - Respects working time, holidays, weekends, task calendars, constraints, and dependencies - Fully unscheduled, partially scheduled (start-only, duration-only), and already-scheduled task scenarios - Parent tasks (cannot draw directly), child tasks (can draw; parent auto-adjusts), milestone tasks (duration = 0) - Feature interactions: taskbar editing, dialog/cell editing, dependencies, scheduling modes, resource assignments - Prerequisites: Edit module injection, allowTaskbarEditing, allowUnscheduledTasks, primary key configured - Behavior with auto/manual/custom scheduling modes and dependency validation - Events: taskbarEditing (prevent draw), actionComplete (post-draw actions) - Edge cases (drawing before project start, overlapping draws, minimal duration) and best practices ### Undo / Redo 📄 **Read:** [references/undo-redo.md](references/undo-redo.md) - UndoRedo module injection, enableUndoRedo property - undoRedoActions — configure which actions to track (Edit, Delete, Add, Sorting, Filtering, ZoomIn/Out, ColumnReorder, ColumnResize, Indent, Outdent, RowDragAndDrop, TaskbarDragAndDrop, ColumnState, PreviousTimeSpan, NextTimeSpan) - undoRedoStepsCount — limit history depth (default: 10; 0 = disabled)