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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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'
• Programmatic: selectRow(), selectRows(), selectCell(), clearSelection(), getSelectedRecords()

Scrolling

📄 Read: references/scrolling.md

• enableVirtualization: true + VirtualScrollService — DOM virtualization for large datasets
• enableTimelineVirtualization — virtualize timeline columns independently
• Splitter: splitterSettings.position (percentage string or pixel value), columnIndex, view ('Default' | 'Grid' | 'Chart')
• Programmatic: scrollToDate('04/02/2024'), scrollToTaskbar(taskId)
• Virtual scroll limitations: row/column templates, grouping, and some aggregate features not supported

Toolbar

📄 Read: references/toolbar.md

• ToolbarService required; set toolbar as string array or mixed ItemModel array
• Built-in items: 'Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search', 'Indent', 'Outdent', 'ZoomIn', 'ZoomOut', 'ZoomToFit', 'ExcelExport', 'CsvExport', 'PdfExport', 'CriticalPath', 'Undo', 'Redo', 'SplitTask', 'MergeTask', 'ColumnChooser'
• Custom items via ItemModel: text, id, prefixIcon, align, tooltipText
• { type: 'Separator' } for visual dividers
• toolbarClick event — use args.item.id to identify clicked item (format: '{ganttId}_{itemId}')
• Enable/disable programmatically: enableToolbarItems() / disableToolbarItems()

Programmatic Methods

📄 Read: references/gantt-methods.md

• Column utilities: autoFitColumns()
• Edit control: cancelEdit(), openAddDialog(), openEditDialog()
• Task management: deleteRecord(), convertToMilestone(), changeTaskMode(), updateRecordByID(), updateRecordByIndex(), updateTaskId(), updateDataSource(), updateProjectDates()
• Toolbar control: enableItems()
• Expand/Collapse: expandByIndex(), expandByID(), collapseByIndex(), collapseByID()
• Undo/Redo stacks: clearUndoCollection(), clearRedoCollection(), getUndoActions(), getRedoActions()
• Data retrieval: getCurrentViewData(), getRecordByID(), getTaskByUniqueID(), getTaskInfo(), getTaskbarHeight(), getExpandedRecords(), getGanttColumns(), getGridColumns()
• Formatting helpers: getDurationString(), getWorkString()
• DOM access: getRowByID(), getRowByIndex()
• Sorting: removeSortColumn()
• Selection: selectCells()
• Row reorder: reorderRows()
• Scrolling: scrollToTask(), updateChartScrollOffset()

Events

📄 Read: references/events.md

• Lifecycle: load, created, dataBound, destroyed
• Edit lifecycle: actionBegin (cancel with args.cancel = true), actionComplete, actionFailure
• Taskbar: taskbarEditing, taskbarEdited, onTaskbarClick, queryTaskbarInfo
• Row/cell: rowDataBound, queryCellInfo, rowSelected, rowDeselected, cellSelected
• Expand/collapse: expanding, expanded, collapsing, collapsed
• Export: beforeExcelExport, excelExportComplete, beforePdfExport, pdfExportComplete, pdfQueryTaskbarInfo
• recordDoubleClick — open custom edit on double click

Context Menu

📄 Read: references/context-menu.md

• enableContextMenu: true + ContextMenuService — right-click on rows or header
• Default items include: 'AutoFitAll', 'AutoFit', 'SortAscending', 'SortDescending', 'Add', 'Edit', 'Delete', 'Save', 'Cancel', 'Indent', 'Outdent', 'TaskInformation', 'SplitTask', 'MergeTask'
• Custom items via ContextMenuItemModel: text, id, iconCss, target (row/header)
• contextMenuOpen — dynamically hide/show items per row
• contextMenuClick — handle item selection

Holidays and Event Markers

📄 Read: references/holidays-and-markers.md

• DayMarkersService required for both holidays and event markers
• holidays: array of { from, to?, label, cssClass } — non-working days that extend task durations
• eventMarkers: array of { day, label, cssClass, top? } — full-height vertical lines at specific dates
• Custom styling per type via cssClass + CSS targeting .e-gantt-event-marker / .e-span-label
• top property staggers overlapping markers at the same date

Critical Path

📄 Read: references/critical-path.md

• enableCriticalPath: true + CriticalPathService — highlights zero/negative-slack tasks in red
• 'CriticalPath' toolbar item — user toggle button
• getCriticalTasks() — returns array of IGanttData objects with slack value
• queryTaskbarInfo + ganttProperties.isCritical — conditional per-task coloring
• CSS overrides: .e-critical-path-container, .e-critical-connector-line
• Rules: completed tasks (100%) excluded; parent/child criticality independent; auto-recalculates on any change

Export (Excel and PDF)

📄 Read: references/export.md

• Excel: allowExcelExport: true + ExcelExportService; call excelExport() / csvExport()
• PDF: allowPdfExport: true + PdfExportService; call pdfExport()
• ExcelExportProperties: fileName, dataSource, includeHiddenColumn, header, footer
• PdfExportProperties: fileName, pageOrientation, pageSize, fitToWidthSettings, ganttStyle, theme
• PDF header/footer content types: Text, Line, PageNumber, Image
• Single-page export: fitToWidthSettings.isFitToWidth: true
• Blob export: pdfExport({}, true) → blob available in pdfExportComplete event
• Multi-Gantt export to one PDF via chained pdfExport() with multipleExport
• pdfQueryTaskbarInfo — per-taskbar colors in PDF output

Undo / Redo

📄 Read: references/undo-redo.md

• enableUndoRedo: true + UndoRedoService — up to 10 steps by default
• undoRedoActions array — choose which action types are tracked (18 supported actions)
• undoRedoStepsCount — configure history depth
• Keyboard: Ctrl+Z / Ctrl+Y; programmatic: undo() / redo()
• 'Undo' / 'Redo' toolbar items auto-disable when history is exhausted

State Persistence

📄 Read: references/state-persistence.md

• enablePersistence: true — saves filter/sort/column state to localStorage under key '{id}gantt'
• Requires unique id on <ejs-gantt> element
• Reset methods: clearStorage(), remove localStorage key manually, or set new id
• Immutable mode (enableImmutableMode) — only re-renders changed rows for large-dataset performance
• Loading animation: loadingIndicator.indicatorType — 'Spinner' (default) | 'Shimmer'
• Manual spinner: showSpinner() / hideSpinner()

Localization, RTL and Formatting

📄 Read: references/localization-rtl.md

• locale property + setCulture() + L10n.load() — translate all Gantt UI strings
• Full locale key reference for the 'gantt' namespace
• RTL: [enableRtl]="true" + locale="ar" — reverses layout direction
• timezone — IANA timezone string (e.g. 'America/New_York', 'UTC') for consistent cross-region dates
• Column date formatting: format string or { type: 'date', skeleton: 'yMd' }
• Column number formatting: 'N2', 'C2', 'P1' etc.

Quick Start Example

import { Component } from '@angular/core';
import { GanttModule, EditService, SortService, FilterService, ToolbarService, SelectionService } from '@syncfusion/ej2-angular-gantt';

@Component({
  imports: [GanttModule],
  standalone: true,
  providers: [EditService, SortService, FilterService, ToolbarService, SelectionService],
  selector: 'app-root',
  template: `
    <ejs-gantt
      [dataSource]="data"
      [taskFields]="taskFields"
      [height]="'450px'"
      [toolbar]="toolbar"
      [allowFiltering]="true"
      [allowSorting]="true"
      [editSettings]="editSettings">
    </ejs-gantt>
  `
})
export class AppComponent {
  // Default: self-referential data (flat array with id + parentID)
  // Use hierarchical (child array) only if user explicitly requests it
  public data: object[] = [
    { TaskID: 1, TaskName: 'Project Initiation',    StartDate: new Date('04/02/2024'), Duration: 5,  Progress: 0,  ParentID: null },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 },
    { TaskID: 3, TaskName: 'Perform Soil test',      StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 },
    { TaskID: 4, TaskName: 'Soil test approval',     StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1, Predecessor: '3FS' }
  ];
  public taskFields: object = {
    id: 'TaskID',         // idMapping
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'  // parentIdMapping — null = root task
  };
  public toolbar: string[] = ['Add', 'Edit', 'Delete', 'ExpandAll', 'CollapseAll', 'Search'];
  public editSettings: object = { allowEditing: true, allowAdding: true, allowDeleting: true, allowTaskbarEditing: true };
}

Common Patterns

When user needs task editing

→ Set editSettings.allowEditing: true, inject EditService → Use mode: 'Auto' for cell editing, mode: 'Dialog' for dialog

When user needs large dataset performance

→ Read references/scrolling.md — enable enableVirtualization: true + VirtualScrollService

When user needs to export data

→ Read references/export.md — inject ExcelExportService or PdfExportService

When user needs resource management

→ Read references/resources.md — configure resources + resourceFields

When user needs calendar-based task scheduling

→ Read references/calendar-settings.md — configure calendarSettings, calendarId, and hoursPerDay

When user needs undo/redo

→ Read references/undo-redo.md — inject UndoRedoService, set enableUndoRedo: true

When user needs localization or RTL

→ Read references/localization-rtl.md — call L10n.load() before bootstrap, set locale and enableRtl

When user needs state persistence

→ Read references/state-persistence.md — set enablePersistence: true and unique id

When user needs split/segment tasks

→ Read references/splitting-and-merging.md — map taskFields.segments, inject EditService

Key Module Injections

Key Props Reference