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, and export.

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 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'
• 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

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
• 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'

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'
• 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)
• 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

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
• 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 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