syncfusion-angular-gantt-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

这是一份关于实现和配置Syncfusion Angular Gantt Chart组件（

ejs-gantt

）的全面指南。内容涵盖从初始设置到关键路径、虚拟滚动、资源视图、撤销/重做、状态持久化、本地化和导出等高级功能的所有细节。

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

当你需要以下功能时可使用本指南：

安装并设置Angular Gantt Chart组件
为甘特图绑定本地或远程数据
配置任务调度模式（自动/手动/自定义）
定义任务依赖关系和前置任务关联
添加、编辑或删除任务（单元格、对话框、任务栏编辑）
分配和管理资源
配置时间轴、缩放和层级格式
自定义任务栏、标签和数据标记
筛选、排序、搜索或选择行/单元格
启用工具栏、上下文菜单或撤销/重做功能
导出为Excel或PDF格式
实现虚拟滚动或状态持久化
应用本地化、RTL布局或时区配置
处理节假日、事件标记、关键路径或基准线

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

📄 阅读： references/getting-started.md

通过
```
ng add @syncfusion/ej2-angular-gantt
```
完成安装
导入所有主题的CSS（material3、bootstrap5、fluent2、tailwind3）
使用
```
imports
```
和
```
providers
```
设置Angular独立组件
通过
```
dataSource
```
和
```
taskFields
```
绑定数据——自引用与层级结构对比
注入功能服务（EditService、FilterService、ToolbarService等）
配置时间轴、工具栏、编辑、筛选、排序功能

gridLines

可选值：

'Both'

'Horizontal'

'Vertical'

'None'

```
actionFailure
```
错误处理，解决常见配置问题

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)

📄 阅读： references/data-binding.md

默认模式： 带
```
id
```
+
```
parentID
```
的自引用扁平数组（idMapping + parentIdMapping）——除非用户明确要求嵌套数据，否则使用此模式
带
```
child
```
数组的层级本地数据——仅当用户明确要求嵌套/树形结构时使用
决策表：何时使用自引用 vs 层级结构
使用
```
DataManager
```
和适配器（ODataV4、WebApiAdaptor、UrlAdaptor）绑定远程数据
通过
```
loadChildOnDemand
```
和
```
hasChildMapping
```
实现按需加载（虚拟加载）
使用
```
async
```
管道绑定Observable / RxJS数据

通过

crudUrl

、

insertUrl

、

updateUrl

、

removeUrl

、

batchUrl

实现远程CRUD

常见问题表（缺少
```
isPrimaryKey
```
、适配器错误、父级日期问题）

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

baselineColor

)

Work scheduling (effort-driven) with
```
work
```
field and
```
workUnit
```

📄 阅读： references/task-scheduling.md

```
taskMode
```
：
```
'Auto'
```
（默认）、
```
'Manual'
```
、
```
'Custom'
```
（通过布尔字段按任务设置）
自动模式：根据依赖关系、工作时间和节假日计算日期
手动模式：所有日期固定为数据源中的值；使用
```
validateManualTasksOnLinking
```
可在关联时仍调整日期
自定义模式：通过数据源中的映射布尔字段按任务设置调度方式
未调度任务（
```
allowUnscheduledTasks
```
）——部分日期、浮动任务栏
```
durationUnit
```
：
```
'Day'
```
|
```
'Hour'
```
|
```
'Minute'
```
工作日：
```
workWeek
```
数组（默认周一至周五）；
```
includeWeekend: true
```
设为7天全工作日
工作时间：
```
dayWorkingTime
```
——
```
{ from, to }
```
范围数组（默认8–17点）；影响基于小时的持续时间

基准线日期（

renderBaseline

、

baselineStartDate

、

baselineEndDate

、

baselineColor

）

基于工作量的调度（工作量驱动），使用
```
work
```
字段和
```
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

📄 阅读： references/task-dependencies.md

依赖类型：
```
FS
```
（完成到开始）、
```
SS
```
、
```
FF
```
、
```
SF
```
——格式：
```
'2FS'
```
、
```
'3SS+1d'
```
多个前置任务用逗号分隔：
```
'2FS,3SS'
```
前置任务滞后/提前量，单位为
```
d
```
/
```
h
```
/
```
m
```
```
autoUpdatePredecessorOffset
```
——加载时同步偏移值与实际位置
```
allowParentDependency
```
——启用父子任务和跨层级依赖
当
```
editSettings.allowTaskbarEditing: true
```
时，可通过拖动连接线编辑

actionBegin

事件

requestType: 'validateLinkedTask'

——处理依赖冲突

编程方式：

addPredecessor()

、

removePredecessor()

、

updateRecordById()

连接线样式：

connectorLineWidth

和

connectorLineBackground

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

📄 阅读： references/task-constraints.md

8种约束类型：ASAP（0）、ALAP（1）、MSO（2）、MFO（3）、SNET（4）、SNLT（5）、FNET（6）、FNLT（7）

通过

taskFields.constraintType

（数值）和

taskFields.constraintDate

（日期）映射

约束仅在自动模式下生效；手动模式下仅存储但不生效
依赖冲突会在
```
actionBegin
```
事件中体现

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

📄 阅读： references/managing-tasks.md

editSettings

：

allowEditing

、

allowAdding

、

allowDeleting

、

allowTaskbarEditing

、

mode

（

'Auto'

'Dialog'

）

按列设置

editType

实现单元格编辑：

'numericedit'

、

'defaultedit'

、

'dropdownedit'

、

'booleanedit'

、

'datepickeredit'

自定义对话框编辑选项卡配置（
```
addDialogFields
```
、
```
editDialogFields
```
）

编程方式：

addRecord()

、

updateRecordById()

、

deleteRecord()

、

openAddDialog()

、

openEditDialog(id)

展开/折叠：

expandAll()

、

collapseAll()

、

expandByID(id)

、

collapseByID(id)

；事件：

expanding

、

expanded

、

collapsing

、

collapsed

通过
```
actionBegin
```
事件实现验证（
```
args.cancel = true
```
可阻止操作）
通过
```
actionComplete
```
+ 检查
```
requestType
```
实现服务端CRUD
通过工具栏或
```
indent()
```
/
```
outdent()
```
方法调整层级缩进/取消缩进

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

📄 阅读： references/splitting-and-merging.md

层级数据使用
```
taskFields.segments
```
；自引用数据使用
```
taskFields.segmentId
```
加载时拆分或通过对话框Segments选项卡/上下文菜单
```
SplitTask
```
动态拆分
通过上下文菜单
```
MergeTask
```
或拖动分段合并任务
```
onTaskbarClick
```
事件结合
```
segmentIndex
```
检测点击的分段
限制：父任务/里程碑任务无法拆分；与多任务栏资源视图不兼容

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

Work-based scheduling:

work

field,

taskType

(

'FixedWork'

'FixedDuration'

'FixedUnit'

)

Work unit:
```
workUnit: 'Hour'
```
|
```
'Day'
```
|
```
'Minute'
```

📄 阅读： references/resources.md

```
resources
```
（数据）+
```
resourceFields
```
（字段映射：
```
id
```
、
```
name
```
、
```
unit
```
、
```
group
```
）
```
taskFields.resourceInfo
```
将资源与任务关联
资源视图模式（
```
viewType: 'ResourceView'
```
），按资源分行显示
```
showOverAllocationAsMultiTaskbar
```
——为过度分配的资源显示堆叠任务栏

基于工作量的调度：

work

字段、

taskType

（

'FixedWork'

、

'FixedDuration'

、

'FixedUnit'

）

工作量单位：
```
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

📄 阅读： references/columns.md

列属性：

field

、

headerText

、

width

、

format

、

type

、

template

、

headerTemplate

列重排（
```
allowReordering
```
）、调整大小（
```
allowResizing
```
）
冻结列（
```
freeze: 'Left'
```
|
```
'Right'
```
）——需要
```
FreezeService
```
通过
```
queryCellInfo
```
实现列合并
```
treeColumnIndex
```
设置树形展开/折叠列
WBS（工作分解结构）列，设置
```
columnType: 'WBS'
```
列菜单（
```
showColumnMenu
```
）——排序、筛选、自动适配、列选择器
CRUD操作需要
```
isPrimaryKey
```

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
```
)
Weekend highlighting (
```
timelineSettings.showWeekend
```
)
Timeline cells tooltip (
```
showTooltip
```
)
Navigate timeline (
```
previousTimeSpan()
```
/
```
nextTimeSpan()
```
)
Zooming in and out

📄 阅读： references/timeline.md

```
timelineSettings
```
配置
自定义顶层和底层时间层级
时间轴视图模式（日/周/月/年）
格式化函数，参数为
```
(date, format, tier, mode)
```
时间轴单元格宽度（
```
timelineUnitSize
```
）
自定义日期格式
```
projectStartDate
```
和
```
projectEndDate
```
时间轴视图窗口（
```
viewStartDate
```
/
```
viewEndDate
```
）
周起始日（
```
weekStartDay
```
）
自动更新时间刻度（
```
updateTimescaleView
```
）
突出显示周末（
```
timelineSettings.showWeekend
```
）
时间轴单元格提示（
```
showTooltip
```
）
时间轴导航（
```
previousTimeSpan()
```
/
```
nextTimeSpan()
```
）
缩放功能

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

📄 阅读： references/taskbar.md

taskbarTemplate

、

parentTaskbarTemplate

、

milestoneTemplate

——完全自定义模板

labelSettings

：

leftLabel

、

rightLabel

、

taskLabel

（字段名或模板）

queryTaskbarInfo

——动态样式：

taskbarBgColor

、

progressBarBgColor

、

taskbarBorderColor

单个任务的标记/数据标记：
```
date
```
、
```
iconClass
```
、
```
label
```
、
```
tooltip
```
通过
```
tooltipSettings.taskbar
```
模板自定义提示

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()

📄 阅读： references/filtering-and-searching.md

```
allowFiltering: true
```
+
```
FilterService
```
——菜单和Excel筛选类型
```
filterSettings.type
```
：
```
'Menu'
```
（默认） |
```
'Excel'
```

filterSettings.hierarchyMode

：

'Parent'

'Child'

'Both'

'None'

加载时通过
```
filterSettings.columns
```
数组设置初始筛选
搜索：
```
allowSearching: true
```
+ 工具栏中的
```
'Search'
```
```
searchSettings
```
：
```
fields
```
、
```
operator
```
、
```
ignoreCase
```

编程方式：

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()

📄 阅读： references/sorting.md

```
allowSorting: true
```
+
```
SortService
```
——点击列标题排序

按列禁用排序：

{ field: 'TaskID', allowSorting: false }

多列排序：Ctrl+点击其他标题；Shift+点击取消排序
加载时通过
```
sortSettings.columns
```
数组设置初始排序

编程方式：

sortColumn()

、

removeSortColumn()

、

clearSorting()

Rows

行配置

📄 Read: references/rows.md

```
rowDataBound
```
/
```
queryCellInfo
```
— dynamic row/cell styling
```
rowHeight
```
— uniform row height in pixels (must exceed
```
taskbarHeight
```
)
```
enableAltRow
```
— alternate row background (default
```
true
```
)
```
rowTemplate
```
— fully custom row layout in TreeGrid pane
```
queryRowInfo
```
with
```
rowSpan
```
— vertical cell spanning

allowRowDragAndDrop

— drag rows to reorder/reparent;

rowDragStartHelper

rowDrop

events

📄 阅读： references/rows.md

```
rowDataBound
```
/
```
queryCellInfo
```
——动态行/单元格样式
```
rowHeight
```
——统一行高（像素值，必须大于
```
taskbarHeight
```
）
```
enableAltRow
```
——交替行背景色（默认
```
true
```
）
```
rowTemplate
```
——TreeGrid面板中完全自定义行布局
```
queryRowInfo
```
结合
```
rowSpan
```
——垂直单元格合并
```
allowRowDragAndDrop
```
——拖动行重新排序/调整父级；
```
rowDragStartHelper
```
/
```
rowDrop
```
事件

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()

📄 阅读： references/selection.md

```
allowSelection: true
```
+
```
SelectionService
```
——任何选择功能都需要此配置
```
selectionSettings.mode
```
：
```
'Row'
```
（默认） |
```
'Cell'
```
|
```
'Both'
```

selectionSettings.type

：

'Single'

（默认） |

'Multiple'

（Ctrl+点击多选）

```
selectionSettings.enableToggle
```
——点击取消已选中行
单元格选择模式：
```
'Flow'
```
|
```
'Box'
```
|
```
'BoxWithBorder'
```

编程方式：

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

📄 阅读： references/scrolling.md

enableVirtualization: true

VirtualScrollService

——大数据集的DOM虚拟化

```
enableTimelineVirtualization
```
——独立虚拟化时间轴列

拆分器：

splitterSettings.position

（百分比字符串或像素值）、

columnIndex

、

view

（

'Default'

'Grid'

'Chart'

）

编程方式：

scrollToDate('04/02/2024')

、

scrollToTaskbar(taskId)

虚拟滚动限制：不支持行/列模板、分组和部分聚合功能

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()

📄 阅读： references/toolbar.md

需要
```
ToolbarService
```
；
```
toolbar
```
设为字符串数组或混合
```
ItemModel
```
数组

内置项：

'Add'

、

'Edit'

、

'Delete'

、

'Update'

、

'Cancel'

、

'ExpandAll'

、

'CollapseAll'

、

'Search'

、

'Indent'

、

'Outdent'

、

'ZoomIn'

、

'ZoomOut'

、

'ZoomToFit'

、

'ExcelExport'

、

'CsvExport'

、

'PdfExport'

、

'CriticalPath'

、

'Undo'

、

'Redo'

、

'SplitTask'

、

'MergeTask'

、

'ColumnChooser'

通过

ItemModel

自定义项：

text

、

id

、

prefixIcon

、

align

、

tooltipText

```
{ type: 'Separator' }
```
设置视觉分隔符
```
toolbarClick
```
事件——通过
```
args.item.id
```
识别点击项（格式：
```
'{ganttId}_{itemId}'
```
）

编程方式启用/禁用：

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()
```
,
```
collapseByIndex()
```

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()
```

📄 阅读： references/gantt-methods.md

列工具：
```
autoFitColumns()
```

编辑控制：

cancelEdit()

、

openAddDialog()

、

openEditDialog()

任务管理：

deleteRecord()

、

convertToMilestone()

、

changeTaskMode()

、

updateRecordByID()

、

updateRecordByIndex()

、

updateTaskId()

、

updateDataSource()

、

updateProjectDates()

工具栏控制：
```
enableItems()
```
展开/折叠：
```
expandByIndex()
```
、
```
collapseByIndex()
```

撤销/重做栈：

clearUndoCollection()

、

clearRedoCollection()

、

getUndoActions()

、

getRedoActions()

数据检索：

getCurrentViewData()

、

getRecordByID()

、

getTaskByUniqueID()

、

getTaskInfo()

、

getTaskbarHeight()

、

getExpandedRecords()

、

getGanttColumns()

、

getGridColumns()

格式化工具：
```
getDurationString()
```
、
```
getWorkString()
```
DOM访问：
```
getRowByID()
```
、
```
getRowByIndex()
```
排序：
```
removeSortColumn()
```
选择：
```
selectCells()
```
行重排：
```
reorderRows()
```
滚动：
```
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

queryRowInfo

rowSelected

rowDeselected

cellSelected

Expand/collapse:
```
expanding
```
,
```
expanded
```
,
```
collapsing
```
,
```
collapsed
```

Export:

beforeExcelExport

excelExportComplete

beforePdfExport

pdfExportComplete

pdfQueryTaskbarInfo

```
recordDoubleClick
```
— open custom edit on double click

📄 阅读： references/events.md

生命周期：
```
load
```
、
```
created
```
、
```
dataBound
```
、
```
destroyed
```

编辑生命周期：

actionBegin

（

args.cancel = true

可取消）、

actionComplete

、

actionFailure

任务栏：

taskbarEditing

、

taskbarEdited

、

onTaskbarClick

、

queryTaskbarInfo

行/单元格：

rowDataBound

、

queryCellInfo

、

queryRowInfo

、

rowSelected

、

rowDeselected

、

cellSelected

展开/折叠：
```
expanding
```
、
```
expanded
```
、
```
collapsing
```
、
```
collapsed
```

导出：

beforeExcelExport

、

excelExportComplete

、

beforePdfExport

、

pdfExportComplete

、

pdfQueryTaskbarInfo

```
recordDoubleClick
```
——双击打开自定义编辑

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

📄 阅读： references/context-menu.md

enableContextMenu: true

ContextMenuService

——右键点击行或标题

默认项包括：

'AutoFitAll'

、

'AutoFit'

、

'SortAscending'

、

'SortDescending'

、

'Add'

、

'Edit'

、

'Delete'

、

'Save'

、

'Cancel'

、

'Indent'

、

'Outdent'

、

'TaskInformation'

、

'SplitTask'

、

'MergeTask'

通过
```
ContextMenuItemModel
```
自定义项：
```
text
```
、
```
id
```
、
```
iconCss
```
、
```
target
```
（行/标题）
```
contextMenuOpen
```
——按行动态显示/隐藏项
```
contextMenuClick
```
——处理项选择

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

📄 阅读： references/holidays-and-markers.md

节假日和事件标记都需要
```
DayMarkersService
```
```
holidays
```
：
```
{ from, to?, label, cssClass }
```
数组——非工作日，会延长任务持续时间
```
eventMarkers
```
：
```
{ day, label, cssClass, top? }
```
数组——特定日期的全高垂直线

通过

cssClass

+ CSS定位

.e-gantt-event-marker

.e-span-label

实现自定义样式

```
top
```
属性可在同一日期错开重叠标记

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

📄 阅读： references/critical-path.md

```
enableCriticalPath: true
```
+
```
CriticalPathService
```
——将零/负松弛任务高亮为红色
```
'CriticalPath'
```
工具栏项——用户切换按钮
```
getCriticalTasks()
```
——返回带
```
slack
```
值的
```
IGanttData
```
对象数组

queryTaskbarInfo

ganttProperties.isCritical

——按任务条件着色

CSS覆盖：

.e-critical-path-container

、

.e-critical-connector-line

规则：已完成任务（100%）排除；父/子任务关键状态独立；任何更改时自动重新计算

Export (Excel and PDF)

导出（Excel和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

📄 阅读： references/export.md

Excel：

allowExcelExport: true

ExcelExportService

；调用

excelExport()

csvExport()

PDF：

allowPdfExport: true

PdfExportService

；调用

pdfExport()

ExcelExportProperties

：

fileName

、

dataSource

、

includeHiddenColumn

、

header

、

footer

PdfExportProperties

：

fileName

、

pageOrientation

、

pageSize

、

fitToWidthSettings

、

ganttStyle

、

theme

PDF页眉/页脚内容类型：
```
Text
```
、
```
Line
```
、
```
PageNumber
```
、
```
Image
```
单页导出：
```
fitToWidthSettings.isFitToWidth: true
```
Blob导出：
```
pdfExport({}, true)
```
→ 在
```
pdfExportComplete
```
事件中获取blob
多甘特图导出到单个PDF：通过
```
multipleExport
```
链式调用
```
pdfExport()
```
```
pdfQueryTaskbarInfo
```
——PDF输出中按任务栏着色

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

📄 阅读： references/undo-redo.md

```
enableUndoRedo: true
```
+
```
UndoRedoService
```
——默认最多10步
```
undoRedoActions
```
数组——选择要跟踪的操作类型（支持18种操作）
```
undoRedoStepsCount
```
——配置历史记录深度
键盘快捷键：
```
Ctrl+Z
```
/
```
Ctrl+Y
```
；编程方式：
```
undo()
```
/
```
redo()
```
历史记录耗尽时，
```
'Undo'
```
/
```
'Redo'
```
工具栏项自动禁用

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()
```

📄 阅读： references/state-persistence.md

```
enablePersistence: true
```
——将筛选/排序/列状态保存到
```
localStorage
```
，键为
```
'{id}gantt'
```
```
<ejs-gantt>
```
元素需要唯一
```
id
```
重置方法：
```
clearStorage()
```
、手动删除localStorage键或设置新
```
id
```
不可变模式（
```
enableImmutableMode
```
）——数据刷新时仅重新渲染更改的行，提升大数据集性能

加载动画：

loadingIndicator.indicatorType

——

'Spinner'

（默认） |

'Shimmer'

手动控制加载动画：
```
showSpinner()
```
/
```
hideSpinner()
```

Localization, RTL and Formatting

本地化、RTL与格式化

📄 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.

📄 阅读： references/localization-rtl.md

```
locale
```
属性 +
```
setCulture()
```
+
```
L10n.load()
```
——翻译所有甘特图UI字符串
```
'gantt'
```
命名空间的完整本地化键参考
RTL：
```
[enableRtl]="true"
```
+
```
locale="ar"
```
——反转布局方向
```
timezone
```
——IANA时区字符串（如
```
'America/New_York'
```
、
```
'UTC'
```
），确保跨区域日期一致
列日期格式化：
```
format
```
字符串或
```
{ type: 'date', skeleton: 'yMd' }
```
列数字格式化：
```
'N2'
```
、
```
'C2'
```
、
```
'P1'
```
等

Quick Start Example

快速入门示例

typescript

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 };
}

typescript

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 {
  // 默认：自引用数据（带id + parentID的扁平数组）
  // 仅当用户明确要求时才使用层级结构（child数组）
  public data: object[] = [
    { TaskID: 1, TaskName: '项目启动',    StartDate: new Date('04/02/2024'), Duration: 5,  Progress: 0,  ParentID: null },
    { TaskID: 2, TaskName: '确定场地位置', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 },
    { TaskID: 3, TaskName: '进行土壤测试',      StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 },
    { TaskID: 4, TaskName: '土壤测试审批',     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 = 根任务
  };
  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

→ 设置

editSettings.allowEditing: true

，注入

EditService

→ 使用

mode: 'Auto'

实现单元格编辑，

mode: 'Dialog'

实现对话框编辑

When user needs large dataset performance

当用户需要大数据集性能优化

→ Read

references/scrolling.md

— enable

enableVirtualization: true

VirtualScrollService

→ 阅读

references/scrolling.md

——启用

enableVirtualization: true

VirtualScrollService

When user needs to export data

当用户需要导出数据

→ Read

references/export.md

— inject

ExcelExportService

PdfExportService

→ 阅读

references/export.md

——注入

ExcelExportService

或

PdfExportService

When user needs resource management

当用户需要资源管理

→ Read

references/resources.md

— configure

resources

resourceFields

→ 阅读

references/resources.md

——配置

resources

resourceFields

When user needs undo/redo

当用户需要撤销/重做功能

→ Read

references/undo-redo.md

— inject

UndoRedoService

, set

enableUndoRedo: true

→ 阅读

references/undo-redo.md

——注入

UndoRedoService

，设置

enableUndoRedo: true

When user needs localization or RTL

当用户需要本地化或RTL

→ Read

references/localization-rtl.md

— call

L10n.load()

before bootstrap, set

locale

and

enableRtl

→ 阅读

references/localization-rtl.md

——在bootstrap前调用

L10n.load()

，设置

locale

和

enableRtl

When user needs state persistence

当用户需要状态持久化

→ Read

references/state-persistence.md

— set

enablePersistence: true

and unique

id

→ 阅读

references/state-persistence.md

——设置

enablePersistence: true

和唯一

id

When user needs split/segment tasks

当用户需要拆分/分段任务

→ Read

references/splitting-and-merging.md

— map

taskFields.segments

, inject

EditService

→ 阅读

references/splitting-and-merging.md

——映射

taskFields.segments

，注入

EditService

Key Module Injections

核心模块注入

Feature	Service to Inject
Editing (add/edit/delete/taskbar drag)	`EditService`
Filtering	`FilterService`
Sorting	`SortService`
Toolbar	`ToolbarService`
Selection	`SelectionService`
Day Markers / Holidays / Event Markers	`DayMarkersService`
Critical Path	`CriticalPathService`
Excel / CSV Export	`ExcelExportService`
PDF Export	`PdfExportService`
Undo / Redo	`UndoRedoService`
Column Menu	`ColumnMenuService`
Context Menu	`ContextMenuService`
Virtual Scrolling	`VirtualScrollService`
Row Drag and Drop	`RowDDService`
Column Reordering	`ReorderService`
Frozen Columns	`FreezeService`
Column Resizing	`ResizeService`

功能	需注入的服务
编辑（添加/编辑/删除/任务栏拖动）	`EditService`
筛选	`FilterService`
排序	`SortService`
工具栏	`ToolbarService`
选择	`SelectionService`
日期标记 / 节假日 / 事件标记	`DayMarkersService`
关键路径	`CriticalPathService`
Excel / CSV导出	`ExcelExportService`
PDF导出	`PdfExportService`
撤销/重做	`UndoRedoService`
列菜单	`ColumnMenuService`
上下文菜单	`ContextMenuService`
虚拟滚动	`VirtualScrollService`
行拖动	`RowDDService`
列重排	`ReorderService`
冻结列	`FreezeService`
列调整大小	`ResizeService`

Key Props Reference

核心属性参考

Property	Type	Default	Description
`dataSource`	`object[]` \| `DataManager`	`[]`	Task data — self-referential (flat) or hierarchical
`taskFields`	`TaskFieldsModel`	—	Maps data fields to Gantt task properties
`height`	`string` \| `number`	`'auto'`	Component height (e.g. `'450px'` )
`taskMode`	`string`	`'Auto'`	Scheduling mode: `'Auto'` \| `'Manual'` \| `'Custom'`
`editSettings`	`EditSettingsModel`	—	Enable add/edit/delete/taskbar editing and edit mode
`toolbar`	`string[]` \| `ItemModel[]`	—	Toolbar buttons — requires `ToolbarService`
`allowFiltering`	`boolean`	`false`	Enable column filter menus — requires `FilterService`
`filterSettings`	`FilterSettingsModel`	—	`type` , `hierarchyMode` , `columns` (initial filters)
`allowSorting`	`boolean`	`false`	Enable column sorting — requires `SortService`
`sortSettings`	`SortSettingsModel`	—	`columns` array for initial sort on load
`allowSelection`	`boolean`	`true`	Enable row/cell selection — requires `SelectionService`
`selectionSettings`	`SelectionSettingsModel`	—	`mode` , `type` , `enableToggle` , `cellSelectionMode`
`enableCriticalPath`	`boolean`	`false`	Highlight critical path — requires `CriticalPathService`
`enableUndoRedo`	`boolean`	`false`	Enable undo/redo — requires `UndoRedoService`
`undoRedoActions`	`string[]`	(all actions)	Which action types to track in history
`undoRedoStepsCount`	`number`	`10`	Maximum undo/redo history depth
`enablePersistence`	`boolean`	`false`	Persist filter/sort/column state to `localStorage`
`enableImmutableMode`	`boolean`	`false`	Re-render only changed rows on data refresh
`allowExcelExport`	`boolean`	`false`	Enable Excel export — requires `ExcelExportService`
`allowPdfExport`	`boolean`	`false`	Enable PDF export — requires `PdfExportService`
`enableContextMenu`	`boolean`	`false`	Enable right-click context menu — requires `ContextMenuService`
`contextMenuItems`	`string[]` \| `ContextMenuItemModel[]`	(defaults)	Context menu items
`enableVirtualization`	`boolean`	`false`	DOM virtualization for large datasets — requires `VirtualScrollService`
`enableTimelineVirtualization`	`boolean`	`false`	Virtualize timeline columns
`renderBaseline`	`boolean`	`false`	Show baseline bars alongside current taskbars
`baselineColor`	`string`	`'red'`	Baseline bar color
`allowUnscheduledTasks`	`boolean`	`false`	Allow tasks missing start/end/duration
`validateManualTasksOnLinking`	`boolean`	`false`	Adjust manual task dates when dependency links change
`allowParentDependency`	`boolean`	`true`	Allow dependencies between parent/child tasks
`autoUpdatePredecessorOffset`	`boolean`	`false`	Sync predecessor offsets with actual positions on load
`highlightWeekends`	`boolean`	`false`	Shade weekend columns in timeline
`gridLines`	`string`	`'Both'`	Grid lines: `'Both'` \| `'Horizontal'` \| `'Vertical'` \| `'None'`
`rowHeight`	`number`	`36`	Height of each row in pixels
`enableAltRow`	`boolean`	`true`	Alternate row background color
`allowRowDragAndDrop`	`boolean`	`false`	Drag rows to reorder or reparent
`showColumnMenu`	`boolean`	`false`	Column header context menu — requires `ColumnMenuService`
`timelineSettings`	`TimelineSettingsModel`	—	`topTier` , `bottomTier` , `timelineUnitSize` , `weekStartDay`
`timelineViewMode`	`string`	—	Shortcut: `'Hour'` \| `'Day'` \| `'Week'` \| `'Month'` \| `'Year'`
`projectStartDate`	`Date` \| `string`	(from data)	Fix timeline start bound
`projectEndDate`	`Date` \| `string`	(from data)	Fix timeline end bound
`holidays`	`HolidayModel[]`	`[]`	Non-working days with labels — requires `DayMarkersService`
`eventMarkers`	`EventMarkerModel[]`	`[]`	Vertical marker lines — requires `DayMarkersService`
`resources`	`object[]`	—	Resource data array
`resourceFields`	`ResourceFieldsModel`	—	Maps resource `id` , `name` , `unit` , `group` fields
`locale`	`string`	`'en-US'`	Culture code for localization (e.g. `'fr'` , `'ar'` )
`enableRtl`	`boolean`	`false`	Right-to-left layout
`timezone`	`string`	(browser)	IANA timezone (e.g. `'UTC'` , `'America/New_York'` )
`durationUnit`	`string`	`'Day'`	Default duration unit: `'Day'` \| `'Hour'` \| `'Minute'`
`workUnit`	`string`	`'Hour'`	Work scheduling unit: `'Hour'` \| `'Day'` \| `'Minute'`
`workWeek`	`string[]`	Mon–Fri	Working days: `['Monday','Tuesday','Wednesday','Thursday','Friday']`
`includeWeekend`	`boolean`	`false`	Treat all 7 days as working days
`dayWorkingTime`	`object[]`	`[{from:8,to:17}]`	Working hour ranges per day: `[{ from: 8, to: 12 }, { from: 13, to: 17 }]`
`dateFormat`	`string`	`'MM/dd/yyyy'`	Global date display format for all date columns
`splitterSettings`	`SplitterSettingsModel`	—	`position` , `columnIndex` , `view` for TreeGrid/chart split
`loadingIndicator`	`LoadingIndicatorModel`	—	`indicatorType` : `'Spinner'` \| `'Shimmer'`

属性	类型	默认值	描述
`dataSource`	`object[]` \| `DataManager`	`[]`	任务数据——自引用（扁平）或层级结构
`taskFields`	`TaskFieldsModel`	—	将数据字段映射到甘特图任务属性
`height`	`string` \| `number`	`'auto'`	组件高度（如 `'450px'` ）
`taskMode`	`string`	`'Auto'`	调度模式： `'Auto'` \| `'Manual'` \| `'Custom'`
`editSettings`	`EditSettingsModel`	—	启用添加/编辑/删除/任务栏编辑及编辑模式
`toolbar`	`string[]` \| `ItemModel[]`	—	工具栏按钮——需要 `ToolbarService`
`allowFiltering`	`boolean`	`false`	启用列筛选菜单——需要 `FilterService`
`filterSettings`	`FilterSettingsModel`	—	`type` 、 `hierarchyMode` 、 `columns` （初始筛选）
`allowSorting`	`boolean`	`false`	启用列排序——需要 `SortService`
`sortSettings`	`SortSettingsModel`	—	`columns` 数组，设置加载时初始排序
`allowSelection`	`boolean`	`true`	启用行/单元格选择——需要 `SelectionService`
`selectionSettings`	`SelectionSettingsModel`	—	`mode` 、 `type` 、 `enableToggle` 、 `cellSelectionMode`
`enableCriticalPath`	`boolean`	`false`	高亮关键路径——需要 `CriticalPathService`
`enableUndoRedo`	`boolean`	`false`	启用撤销/重做——需要 `UndoRedoService`
`undoRedoActions`	`string[]`	（所有操作）	跟踪历史记录的操作类型
`undoRedoStepsCount`	`number`	`10`	撤销/重做历史记录的最大深度
`enablePersistence`	`boolean`	`false`	将筛选/排序/列状态持久化到 `localStorage`
`enableImmutableMode`	`boolean`	`false`	数据刷新时仅重新渲染更改的行
`allowExcelExport`	`boolean`	`false`	启用Excel导出——需要 `ExcelExportService`
`allowPdfExport`	`boolean`	`false`	启用PDF导出——需要 `PdfExportService`
`enableContextMenu`	`boolean`	`false`	启用右键上下文菜单——需要 `ContextMenuService`
`contextMenuItems`	`string[]` \| `ContextMenuItemModel[]`	（默认项）	上下文菜单项
`enableVirtualization`	`boolean`	`false`	大数据集的DOM虚拟化——需要 `VirtualScrollService`
`enableTimelineVirtualization`	`boolean`	`false`	虚拟化时间轴列
`renderBaseline`	`boolean`	`false`	在当前任务栏旁显示基准线
`baselineColor`	`string`	`'red'`	基准线颜色
`allowUnscheduledTasks`	`boolean`	`false`	允许缺少开始/结束/持续时间的任务
`validateManualTasksOnLinking`	`boolean`	`false`	依赖关系变化时调整手动任务日期
`allowParentDependency`	`boolean`	`true`	允许父子任务间的依赖关系
`autoUpdatePredecessorOffset`	`boolean`	`false`	加载时同步前置任务偏移值与实际位置
`highlightWeekends`	`boolean`	`false`	为时间轴中的周末列添加阴影
`gridLines`	`string`	`'Both'`	网格线： `'Both'` \| `'Horizontal'` \| `'Vertical'` \| `'None'`
`rowHeight`	`number`	`36`	每行高度（像素）
`enableAltRow`	`boolean`	`true`	交替行背景色
`allowRowDragAndDrop`	`boolean`	`false`	拖动行重新排序或调整父级
`showColumnMenu`	`boolean`	`false`	列标题上下文菜单——需要 `ColumnMenuService`
`timelineSettings`	`TimelineSettingsModel`	—	`topTier` 、 `bottomTier`
`timelineViewMode`	`string`	—	快捷设置： `'Hour'` \| `'Day'` \| `'Week'` \| `'Month'` \| `'Year'`
`projectStartDate`	`Date` \| `string`	（来自数据）	固定时间轴起始边界
`projectEndDate`	`Date` \| `string`	（来自数据）
`holidays`	`HolidayModel[]`	`[]`	带标签的非工作日——需要 `DayMarkersService`
`eventMarkers`	`EventMarkerModel[]`	`[]`	垂直标记线——需要 `DayMarkersService`
`resources`	`object[]`	—	资源数据数组
`resourceFields`	`ResourceFieldsModel`	—	映射资源 `id` 、 `name` 、 `unit` 、 `group` 字段
`locale`	`string`	`'en-US'`	本地化文化代码（如 `'fr'` 、 `'ar'` ）
`enableRtl`	`boolean`	`false`	从右到左布局
`timezone`	`string`	（浏览器时区）	IANA时区（如 `'UTC'` 、 `'America/New_York'` ）
`durationUnit`	`string`	`'Day'`	默认持续时间单位： `'Day'` \| `'Hour'` \| `'Minute'`
`workUnit`	`string`	`'Hour'`	工作量调度单位： `'Hour'` \| `'Day'` \| `'Minute'`
`workWeek`	`string[]`	周一至周五	工作日： `['Monday','Tuesday','Wednesday','Thursday','Friday']`
`includeWeekend`	`boolean`	`false`	将7天设为工作日
`dayWorkingTime`	`object[]`	`[{from:8,to:17}]`	每日工作时间范围： `[{ from: 8, to: 12 }, { from: 13, to: 17 }]`
`dateFormat`	`string`	`'MM/dd/yyyy'`	所有日期列的全局日期显示格式
`splitterSettings`	`SplitterSettingsModel`	—	TreeGrid/图表拆分的 `position` 、 `columnIndex` 、 `view`
`loadingIndicator`	`LoadingIndicatorModel`	—	`indicatorType` : `'Spinner'` \| `'Shimmer'`