syncfusion-angular-gantt-chart

# 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, export, task calendars, serial numbers, advanced scheduling units, dependency restrictions, hierarchy checkbox selection, and taskbar drawing. ## 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 project and task calendars for working time, holidays, and exceptions - 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) ### Observable CRUD Operations 📄 **Read:** [references/observable-crud.md](references/observable-crud.md) - Handle add, edit, delete operations with Observable data binding via `dataSourceChanged` event - Service extends `BehaviorSubject` for proper Observable binding - Extract task data correctly: use `(args.data as any).taskData` for edit operations - Always call `args.endEdit()` after CRUD operation completes to notify Gantt - Single vs multiple record deletion: check `args.data.length` - Emit updated data via `super.next()` / `this.next()` to refresh UI - Handle errors gracefully and ensure endEdit() is called even on failure ### 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'` | `'Week'` | `'Month'` - Duration units with embedded values: `'5 days'`, `'2 weeks'`, `'1 month'` - `daysPerWeek` and `daysPerMonth` — conversion controls for week/month-based scheduling - **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`, `baselineDuration`, `baselineColor`) and `baselineTemplate` for custom baseline rendering - Work scheduling (effort-driven) with `work` field and `workUnit` ### Calendar Settings 📄 **Read:** [references/calendar-settings.md](references/calendar-settings.md) - `calendarSettings` — top-level calendar configuration for the Gantt chart - `calendarSettings.projectCalendar` — default working days, working hours, holidays, and exceptions for all tasks - `calendarSettings.taskCalendar` — task-specific calendars for shift-based, team-based, or region-based scheduling - `taskFields.calendarId` — maps a task record to a named task calendar- `calendarSettings.taskCalendar` fully overrides the project calendar for matched tasks - Task calendars affect working time calculation, duration calculation, holidays, weekends, and dependency scheduling- `hoursPerDay` — converts working duration into day-based duration values for display and calculations - Calendar exceptions allow date-specific overrides for working time and non-working time - Task calendars override the project calendar for assigned tasks - Holidays, weekends, and working-hours rules affect task duration, dependency resolution, and taskbar placement ### 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 - `allowedDependencyTypes` — restrict dependency creation and editing to selected types - 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'` ### Calendar Settings 📄 **Read:** [references/calendar-settings.md](references/calendar-settings.md) - Project calendar defines the default working schedule for the entire project - Task calendars let specific tasks follow their own working days, holidays, and exceptions - `calendarId` selects the task calendar used by a task record - `hoursPerDay` controls how day-based duration values are interpreted - Task calendars do not merge with the project calendar; assigned task calendars take precedence for that task - Use task calendars for multi-shift, multi-team, or region-specific scheduling requirements ### 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'` - Serial Number column with `enableSerialNumber: true` and `field: 'SerialNumber'` - Serial numbers recalculate after sorting, filtering, virtualization, row drag-and-drop, paging, CRUD, and hierarchy changes - Recalculation after filtering, searching, sorting, expanding/collapsing, indentation, CRUD, row drag-and-drop, and data refresh - 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`) - Infinite timeline scrolling (`enableInfiniteTimelineScroll`) - Weekend highlighting (`timelineSettings.showWeekend`) - Timeline cells tooltip (`showTooltip`) - `timelineTemplate` — custom HTML in tier header cells (via `<ng-template #timelineTemplate let-data>` using `data.date`, `data.value`, `data.tier`) - Navigate timeline (`previousTimeSpan()` / `nextTimeSpan()`) - Zooming in and out ### Taskbar 📄 **Read:** [references/taskbar.md](references/taskbar.md) - `taskbarTemplate`, `parentTaskbarTemplate`, `milestoneTemplate` — full custom templates - `labelSettings`: `leftLabel`, `rightLabel`, `taskLabel` (field names or templates) - Label templates with `ng-template` for rich content rendering - `queryTaskbarInfo` — dynamic styling: `taskbarBgColor`, `progressBarBgColor`, `taskbarBorderColor` - `indicators` / data markers on individual tasks: `date`, `iconClass`, `label`, `tooltip` - Tooltip customization via `tooltipSettings.taskbar` template - `taskbarHeight`, `taskbarCornerRadius`, `allowTaskbarDragAndDrop` ### Taskbar Draw 📄 **Read:** [references/taskbar-draw.md](references/taskbar-draw.md) - `editSettings.allowTaskbarDraw` — enables drawing taskbars directly on the timeline to create or schedule unscheduled tasks - Taskbar drawing behavior and user workflow - Scheduling output: `StartDate`, `EndDate`, `Duration` generated from drawn range - Fully unscheduled, partially scheduled, parent, child, milestone, and manually scheduled task scenarios - Feature interactions with taskbar editing, dialog editing, cell editing, validation, working time, and calendar rules - Implementation example with toolbar and column configuration - Best practices and limitations ### Filtering and Searching 📄 **Read:** [references/filtering-and-searching.md](references/filtering-and-searching.md) - `allowFiltering: true` + `FilterService` — menu and Excel filter types - `filterSettings.type`: `'Menu'` (default) | `'Excel'` - `filterSettings.hierarchyMode`: `'Parent'` | `'Child'` | `'Both'` | `'None'` - Initial filter on load via `filterSettings.columns` array - Searching: `allowSearching: true` + `'Search'` in toolbar - `searchSettings`: `fields`, `operator`, `ignoreCase` - Programmatic: `filterByColumn()`, `clearFiltering()`, `search()` ### Sorting 📄 **Read:** [references/sorting.md](references/sorting.md) - `allowSorting: true` + `SortService` — click column headers to sort - Disable per column: `{ field: 'TaskID', allowSorting: false }` - Multi-column sort: Ctrl+click additional headers; Shift+click to remove - Initial sort on load via `sortSettings.columns` array - Programmatic: `sortColumn()`, `removeSortColumn()`, `clearSorting()` ### Rows 📄 **Read:** [references/rows.md](references/rows.md) - `rowDataBound` / `queryCellInfo` — dynamic row/cell styling - `rowHeight` — uniform row height in pixels (must exceed `taskbarHeight`) - `rowSpan` via `queryCellInfo` — vertical cell spanning - `allowRowDragAndDrop` — drag rows to reorder/reparent; `rowDrop` events - `indent()` / `outdent()` — change hierarchy level for the selected row - `autoFocusTasks` — focus the matching taskbar when a row is selected ### Selection 📄 **Read:** [references/selection.md](references/selection.md) - `allowSelection: true` + `SelectionService` — required for any selection feature - `selectionSettings.mode`: `'Row'` (default) | `'Cell'` | `'Both'` - `selectionSettings.type`: `'Single'` (default) | `'Multiple'` (Ctrl+click for multi-select) - `selectionSettings.enableToggle` — click to deselect already-selected row - `selectionSettings.hierarchyMode` / hierarchy checkbox selection modes: `'Self'` | `'Hierarchy'` | `'FilteredHierarchy'` - Cell selection modes: `'Flow'` | `'Box'` | `'BoxWithBorder'`