Skip to main content 首页 创作者 syncfusion javascript-ui-controls-skills syncfusion-javascript-gantt-chart
syncfusion-javascript-gantt-chart Implement Syncfusion Gantt Chart using JavaScript/TypeScript (Essential JS 2). Use this when working with ej2-gantt component for project scheduling, task dependencies, and timeline management. Covers full Gantt implementation including data binding, task scheduling, columns, resources, timeline configuration, WBS, resource view, critical path, baseline tracking, filtering, sorting, editing, and export functionality (Excel/PDF).
跳到安装 Skills Marketplace 发现并探索由社区构建的 Agent Skills
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-gantt-chart命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
下载 Zip 下载中... name syncfusion-javascript-gantt-chart description Implement Syncfusion Gantt Chart using JavaScript/TypeScript (Essential JS 2). Use this when working with ej2-gantt component for project scheduling, task dependencies, and timeline management. Covers full Gantt implementation including data binding, task scheduling, columns, resources, timeline configuration, WBS, resource view, critical path, baseline tracking, filtering, sorting, editing, and export functionality (Excel/PDF). metadata {"author":"Syncfusion Inc","version":"34.1.29"}
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, milestones, duration units, constraints)Define columns (custom columns, templates, frozen, WBS, 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, dependency editing, indent/outdent)Implement filtering, sorting, searching on Gantt gridShow task dependencies (FS, SS, FF, SF, offsets, connector lines)
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 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
npm installation, webpack setup
Basic Gantt initialization (app.ts + index.html)
taskFields mapping, module injection
Error handling with actionFailure
Data Binding
Local hierarchical and self-referential (flat) data
Remote data (DataManager, WebApiAdaptor, UrlAdaptor)
Load child on demand
Ajax binding, split tasks (segments)
Task Scheduling
taskMode: 'Auto' (default) / 'Manual' / 'Custom' — controls date validation behaviourAuto: 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'); per-task via taskFields.durationUnit field or inline string ('4hours', '30min')
Milestones: Duration: 0 renders a diamond shape
projectStartDate / projectEndDate — constrain chart range; auto-calculated if omitteddayWorkingTime — define working hour ranges (default: 8–12 and 13–17); used for auto-scheduling calculationsweekWorkingTime — per-day-of-week working hours; overrides dayWorkingTime for listed days; unlisted days fall back to dayWorkingTimeworkWeek — specify working days (default: Mon–Fri); includeWeekend: true makes Sat/Sun working dayshighlightWeekends: true — visually shade non-working days in chart
Task Constraints
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
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
Critical Path
enableCriticalPath property
Slack calculation (zero/negative slack)
Visual highlighting and CPM principles
Baseline
renderBaseline, baselineColor
baselineStartDate, baselineEndDate, baselineDuration
Baseline milestones, CSS customization
Resources
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
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
enableMultiTaskbar for collapsed resource rows
Overlapping task visualization
Editing tasks in collapsed state
Work & Task Types
taskFields.work mapping, workUnit (Hour/Day/Minute)
FixedWork, FixedDuration, FixedUnit task types
Columns
columns array definition, treeColumnIndex
Checkbox columns, responsive columns
Column spanning, column templates
WBS column (enableWBS, enableAutoWbsUpdate)
Column Operations
Column resizing (allowResizing, Resize module)
Column reordering (allowReordering, Reorder module)
Column menu (showColumnMenu)
Frozen/pinned columns (frozenColumns)
Timeline
topTier / bottomTier units and format
timelineSettings configuration
Custom timeline formatting, timeline tooltip
Zooming
ZoomIn, ZoomOut, ZoomToFit toolbar items
zoomingLevels configuration
Programmatic zoom control
Sorting
allowSorting: true + Sort module injectionClick 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
allowFiltering, Filter module
Menu filter and Excel-like filter
Column-level filtering, searching
Selection
allowSelection: false disables all selection; Selection module requiredselectionSettings.mode: 'Row' (default) / 'Cell' / 'Both'selectionSettings.type: 'Single' (default) / 'Multiple' (Ctrl+click for multi-select)selectionSettings.enableToggle: true — click selected item again to deselectenableHover: true — highlights rows, taskbars, header cells, and timeline cells on hoverRow 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 cellsTouch: tap to select a row; tap popup to enter multi-row select mode, then tap additional rows
Cell selection not supported with enableVirtualization
Rows
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
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)
editSettings (allowAdding, allowEditing, allowDeleting)
Cell / Dialog / Taskbar editing modes
Add, delete, indent/outdent, drag-and-drop rows
Server-side CRUD, split/merge tasks, validation
Undo / Redo
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)
Toolbar Undo/Redo items for UI-based history navigation
Programmatic control: undo() and redo() methods
Retrieve history: getUndoActions() / getRedoActions()
Reset history: clearUndoCollection() / clearRedoCollection()
Toolbar
Built-in toolbar items reference (Add, Edit, Delete, Update, Cancel, Search, ExpandAll, CollapseAll, Indent, Outdent, PrevTimeSpan, NextTimeSpan, ZoomIn, ZoomOut, ZoomToFit, Undo, Redo)
Override built-in toolbar behavior via toolbarClick with args.cancel = true
Show only icons — hide text labels with CSS (.e-tbar-btn-text)
Customize toolbar button appearance using CSS class selectors
Reposition toolbar to bottom using created event + DOM manipulation
Custom toolbar items using ItemModel (text, id, prefixIcon, align)
Mix built-in and custom items in the same toolbar array
Enable/disable toolbar items dynamically via gantt.toolbarModule.enableItems()
Add input components (AutoComplete, DropDownList) to toolbar using type: 'Input' with template
Context Menu
enableContextMenu, ContextMenu module
Default and custom context menu items
Event Markers
DayMarkers module, eventMarkers array
day, label, cssClass properties
Holidays
DayMarkers module, holidays array
from, to, label, cssClass properties
Data Markers (Indicators)
taskFields.indicators mapping
date, iconClass, name, tooltip per indicator
Task Labels
labelSettings: leftLabel, rightLabel, taskLabel
Field-based and template-based labels
Taskbar Customization
taskbarHeight, rowHeight
taskbarTemplate, parentTaskbarTemplate, milestoneTemplate
queryTaskbarInfo event for dynamic styling
Scrolling
scrollToDate method, scroll settings
Horizontal and vertical scroll control
Virtual Scrolling
VirtualScroll module injection, enableVirtualization for row virtualization
enableTimelineVirtualization — on-demand horizontal timeline rendering (renders 3x viewport width initially)
Get filtered record count with virtual scroll: actionComplete + gantt.treeGrid.filterModule.filteredResult
Get total dataset count via gantt.flatData.length in created event
Limitations: height must be in pixels, no multi-taskbar in Resource View, cell selection not persisted
Splitter
splitterSettings (position, columnIndex, view)
setSplitterPosition method, view modes
State Persistence
enablePersistence — saves Filtering, Sorting, Columns state in localStorage
localStorage key format: "gantt" + element ID (e.g., "ganttGantt")
Get/set persisted state via window.localStorage.getItem / setItem
Prevent specific keys from persisting via addOnPersist override in dataBound
Not persisted by default: column templates, formatters, headerText, headerTemplate, value accessors
Restore header templates and header text using getPersistData() + Object.assign + gantt.treeGrid.setProperties()
Immutable Mode
enableImmutableMode for performance
When to use immutable mode
Timezone
timezone property (UTC, IANA zones)
Consistent time display across regions
Globalization & Localization
Localization: L10n.load({ 'de-DE': { gantt: { ... } } }) + locale: 'de-DE' on Gantt instance
Full locale key table organized by category: task fields/columns, dialog/tabs, toolbar/actions, context menu/dependency, labels/timeline, predecessor validation messages (taskBeforePredecessor_FS etc.)
New keys vs old reference: resourceID, writeNotes, task, tasks, saveButton, okText, from/to, taskLink, lag, start/finish, enterValue, above/below/child, milestone, toTask/toMilestone, eventMarkers, leftTaskLabel, rightTaskLabel, timelineCell, confirmPredecessorDelete, changeScheduleMode, subTasksStartDate/subTasksEndDate, scheduleStartDate/scheduleEndDate, unit, work, taskType, group
Internationalization: loadCldr(cagregorian, numbers) + setCulture() for locale-aware date/number formatting; CLDR data from @syncfusion/ej2-cldr-data
RTL: enableRtl: true + matching locale (e.g., 'ar-AE') — reverses text direction and full layout
Default locale is 'en-US'
Excel Export
ExcelExport module, allowExcelExport, toolbar items: ExcelExport, CsvExport
excelExport() / csvExport() methods, export to blob (4th arg isBlob)Custom data source override (dataSource in ExcelExportProperties)
fileName, includeHiddenColumn, exportType
Show/hide columns on export (toolbarClick + excelExportComplete to restore)
Cell formatting (excelQueryCellInfo + args.style.backColor)
Theme (header/record font name and color), header/footer rows with hyperlinks and styles
Multiple Gantt export: AppendToSheet (same sheet, blankRows) and NewSheet modes
PDF Export
PdfExport module, allowPdfExport, toolbar item
fileName, pageOrientation, pageSize, exportType, includeHiddenColumn, showPredecessorLines
Export current view data, export/hide columns on export
Fit-to-width (isFitToWidth, chartWidth, gridWidth), export to blob
Header/footer: Text, Image, Line, PageNumber content types; enableFooter
Multiple Gantt export to single PDF, indicators in PDF export
Conditional cell formatting (pdfQueryCellInfo + PdfColor)
Timeline cell formatting (pdfQueryTimelineCellInfo)
Taskbar formatting + split taskbar segment colors (taskSegmentStyles)
ganttStyle: full appearance override (columnHeader, cell, taskbar, timeline, label, eventMarker, holiday)
Export with column templates (images/hyperlinks), taskbar templates, label templates, header templates
pdfColumnHeaderQueryCellInfo for header template export
Loading Animation
loadingIndicator.indicatorType: 'Shimmer' | 'Spinner'
Shimmer with virtual scroll
Accessibility
WCAG 2.1 Level AA compliance
Keyboard navigation (grid, toolbar, context menu shortcuts)
ARIA roles and attributes (treegrid, row, gridcell, columnheader, dialog)
High contrast theme (highcontrast.css)
Screen reader support (NVDA, JAWS, VoiceOver) — taskbarAriaLabel customization
Focus management and autoFocusTasks
Programmatic Methods
Column : autoFitColumns(field?), getGanttColumns(), getGridColumns(), refreshColumns(), reorderColumns(from, to), removeSortColumn(field)Row/Record lookup : getRecordByID(id), getTaskByUniqueID(uid), getRowByID(id), getRowByIndex(index), getTaskInfo(taskId), getCurrentViewData(), getExpandedRecords(records)Expand/Collapse : expandByIndex(index | index[]), collapseByIndex(index)Edit/CRUD : cancelEdit(), deleteRecord(taskDetail), updateRecordByIndex(index, data), updateTaskId(currentId, newId), changeTaskMode(data), convertToMilestone(id)Dependency : removePredecessor(id) — removes all dependencies from a taskSplit/Merge : splitTask(taskId, splitDate | splitDate[]), mergeTask(taskId, segmentIndexes) — requires allowTaskbarEditing; parent/milestones cannot be splitSelection : selectCells(rowCellIndexes) — select cells by { rowIndex, cellIndexes[] } pairs; requires mode: 'Cell'Scroll : scrollToTask(taskId), setScrollTop(px), updateChartScrollOffset(left, top)Data : updateDataSource(dataSource, { projectStartDate, projectEndDate })Critical path : getCriticalTasks() → IGanttData[]; requires enableCriticalPath + CriticalPath moduleFormatting helpers : getDurationString(value, unit), getWorkString(value, unit), getTaskbarHeight()All methods use the Gantt instance directly: gantt.methodName(args) (TypeScript/JavaScript)
Events
actionBegin — fires before any action (add/edit/delete/sort/filter/dependency/zoom); supports args.cancel; argument types vary by operation (ITaskAddedEventArgs, ITimeSpanEventArgs, FilterEventArgs, SortEventArgs, IDependencyEventArgs, ZoomEventArgs)
actionComplete — fires after action completes; switch on args.requestType (filtering, sorting, save, delete, AfterZoomIn/Out/ToProject)
actionFailure — fires on operation failure; args.error[0] for error details
cellEdit — fires when grid cell enters edit mode; args.cancel = true prevents editing; args: cancel, cell, columnName, columnObject, row, rowData, value, validationRules
beforeTooltipRender — fires before tooltip renders (taskbar/connector/timeline); override args.content or set args.cancel = true
beforeExcelExport / beforePdfExport — fires before export; args.cancel = true aborts; isCsv flag for Excel vs CSV
Cell selection events (require selectionSettings.mode: 'Cell' or 'Both'): cellSelecting (cancel to prevent), cellSelected, cellDeselecting, cellDeselected — CellSelectEventArgs (cellIndex, cells, currentCell, data, previousRowCell) and CellDeselectEventArgs (cellIndexes, cells, data)
Row selection events: rowSelecting, rowSelected, rowDeselecting, rowDeselected — cancel, data, rowIndex, isCtrlPressed, isShiftPressed
Column drag events (require allowReordering: true + Reorder module): columnDragStart, columnDrag, columnDrop — ColumnDragEventArgs (column, target, draggableType)
Column menu events (require showColumnMenu: true + ColumnMenu module): columnMenuOpen (ColumnMenuOpenEventArgs: cancel, column, element, items, left, top, parentItem), columnMenuClick (ColumnMenuClickEventArgs: name, column, element, item)
contextMenuClick — requires ContextMenu module + contextMenuItems; args: name, element, event, item (id/text), type, rowData
Export complete events: excelExportComplete / pdfExportComplete — access blob via args.promise.then((e) => e.blobData)
requestType reference table: beforeSave, beforeDelete, taskbarEditing, filtering, sorting, zoom variants, save, delete, validateDependency, updateDependency
同仓库更多 Skills syncfusion-javascript-data-manager Implements Syncfusion TypeScript/JavaScript(ES6+) DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
syncfusion-javascript-grid Implements Syncfusion JavaScript Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-javascript-diagram Create and edit visual diagrams with Syncfusion JavaScript Diagram (flowcharts, BPMN, swimlanes, UML, org charts, network topologies). Trigger for diagram rendering, node/connector modeling, layouts, data binding, palettes, interactive tools, exporting, and workflow visualization tasks.
syncfusion
syncfusion/javascript-ui-controls-skills
打开 GitHub 仓库 