syncfusion-javascript-gantt-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Gantt Chart

实现 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.

这是一套用于在 JavaScript/TypeScript 项目中实现 Syncfusion Essential JS 2 Gantt Chart 组件的完整指南，覆盖从初始搭建到关键路径、资源管理、虚拟滚动、导出等高级功能的全部内容。

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 grid
Show 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)

当用户需要完成以下需求时可使用本指南：

从零搭建 Syncfusion Gantt Chart（安装、依赖处理、基础初始化）
数据绑定（本地层级数据、扁平/自引用数据、远程 DataManager、按需加载）
任务调度配置（自动/手动模式、里程碑、时长单位、约束规则）
列定义（自定义列、模板、冻结列、WBS、复选框、响应式适配）
资源管理（资源分配、资源视图、多任务条、工作/任务类型）
时间线配置（上下层级刻度、缩放、格式化）
启用编辑能力（单元格编辑、对话框编辑、任务条拖拽/调整大小、依赖编辑、缩进/ outdent）
在甘特图表格中实现筛选、排序、搜索
展示任务依赖（FS、SS、FF、SF、偏移量、连接线）
展示关键路径、基线、事件标记、节假日、数据标记、标签
导出到 Excel 或 PDF
实现工具栏、右键菜单、撤销/重做
处理事件、状态持久化、本地化、RTL、时区适配
性能优化（虚拟滚动、不可变模式、加载动画）

Quick Start

快速开始

typescript

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

typescript

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

搭建与安装

📄 Read: references/getting-started.md

npm installation, webpack setup
Basic Gantt initialization (app.ts + index.html)
taskFields mapping, module injection
Error handling with actionFailure

📄 阅读： references/getting-started.md

npm 安装、webpack 配置
基础甘特图初始化（app.ts + index.html）
taskFields 映射、模块注入
actionFailure 错误处理

Data Binding

数据绑定

📄 Read: references/data-binding.md

Local hierarchical and self-referential (flat) data
Remote data (DataManager, WebApiAdaptor, UrlAdaptor)
Load child on demand
Ajax binding, split tasks (segments)

📄 阅读： references/data-binding.md

本地层级数据和自引用（扁平）数据
远程数据（DataManager、WebApiAdaptor、UrlAdaptor）
子项按需加载
Ajax 绑定、拆分任务（分段）

Task Scheduling

任务调度

📄 Read: references/task-scheduling.md

```
taskMode
```
:
```
'Auto'
```
(default) /
```
'Manual'
```
/
```
'Custom'
```
— controls date validation behaviour
Auto: 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 omitted
```
dayWorkingTime
```
— define working hour ranges (default: 8–12 and 13–17); used for auto-scheduling calculations
```
weekWorkingTime
```
— per-day-of-week working hours; overrides
```
dayWorkingTime
```
for listed days; unlisted days fall back to
```
dayWorkingTime
```
```
workWeek
```
— specify working days (default: Mon–Fri);
```
includeWeekend: true
```
makes Sat/Sun working days
```
highlightWeekends: true
```
— visually shade non-working days in chart

📄 阅读： references/task-scheduling.md

```
taskMode
```
:
```
'Auto'
```
（默认）/
```
'Manual'
```
/
```
'Custom'
```
— 控制日期校验逻辑
自动模式：父任务条基于子任务的最小/最大日期自动生成；依赖变更会自动调整后续任务时间
手动模式：用户完全控制所有日期，无自动重计算；配置
```
validateManualTasksOnLinking: true
```
可仅在关联前驱任务时触发校验
自定义模式：通过数据源中的
```
taskFields.manual
```
布尔字段为单个任务指定调度模式
未排期任务：配置
```
allowUnscheduledTasks: true
```
支持仅设置开始日期、仅设置结束日期、仅设置时长、无任何时间信息的任务；如果设置为
```
false
```
，未排期任务默认从
```
projectStartDate
```
开始，时长为1
时长单位：
```
durationUnit
```
全局配置（
```
'Day'
```
/
```
'Hour'
```
/
```
'Minute'
```
）；可通过
```
taskFields.durationUnit
```
字段为单个任务指定，也可使用行内字符串（
```
'4hours'
```
、
```
'30min'
```
）
里程碑：
```
Duration: 0
```
会渲染为菱形图标
```
projectStartDate
```
/
```
projectEndDate
```
— 限制图表时间范围；如果不配置会自动计算
```
dayWorkingTime
```
— 定义工作时段范围（默认：8-12点和13-17点）；用于自动调度的时长计算
```
weekWorkingTime
```
— 按周内日期定义工作时段；对指定日期会覆盖
```
dayWorkingTime
```
配置，未指定日期沿用
```
dayWorkingTime
```
配置
```
workWeek
```
— 指定工作日（默认：周一到周五）；配置
```
includeWeekend: true
```
会将周六/周日设为工作日
```
highlightWeekends: true
```
— 在图表中为非工作日添加视觉阴影

Task Constraints

任务约束

📄 Read: references/task-constraints.md

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)

📄 阅读： references/task-constraints.md

约束类型：ASAP(0)、ALAP(1)、MSO(2)、MFO(3)、SNET(4)、SNLT(5)、FNET(6)、FNLT(7)
taskFields 中 constraintType 和 constraintDate 字段映射
优势：强制任务顺序、锚定里程碑、避免资源冲突
通过 actionBegin 处理约束冲突（requestType: 'validateTaskViolation'）
校验模式标识：respectMustStartOn、respectMustFinishOn、respectStartNoLaterThan、respectFinishNoLaterThan
约束与 taskMode（自动/手动/自定义）的交互逻辑
通过对话框编辑器或编程方式（updateRecordByID）编辑约束

Task Dependency

任务依赖

📄 Read: references/task-dependency.md

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

📄 阅读： references/task-dependency.md

支持 FS、SS、FF、SF 四种类型，可配置滞后/提前偏移量（天/小时/分钟单位）
支持父任务依赖、多个前驱任务（逗号分隔）
连接线自定义（connectorLineWidth、connectorLineBackground）
addPredecessor / removePredecessor / updatePredecessor 方法
通过 actionBegin 配置校验模式（respectLink、removeLink、preserveLinkWithEditing）
所有模式都禁用时会弹出校验对话框
autoUpdatePredecessorOffset — 初始加载时根据日历规则同步偏移量
updateOffsetOnTaskbarEdit: false — 任务条拖拽时保留偏移量
通过 .e-gantt-dependency-view-container 动态显示/隐藏依赖线
enablePredecessorValidation: false — 仅绘制依赖线，不强制执行调度规则

Critical Path

关键路径

📄 Read: references/critical-path.md

enableCriticalPath property
Slack calculation (zero/negative slack)
Visual highlighting and CPM principles

📄 阅读： references/critical-path.md

enableCriticalPath 属性配置
浮动时间计算（零/负浮动时间）
视觉高亮和 CPM 原理

Baseline

基线

📄 Read: references/baseline.md

renderBaseline, baselineColor
baselineStartDate, baselineEndDate, baselineDuration
Baseline milestones, CSS customization

📄 阅读： references/baseline.md

renderBaseline、baselineColor 配置
baselineStartDate、baselineEndDate、baselineDuration 配置
基线里程碑、CSS 自定义

Resources

资源

📄 Read: references/resources.md

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

📄 阅读： references/resources.md

resourceFields 映射、resources 集合
任务资源分配、资源单位
过度分配、资源模板
自定义列模板 + queryTaskbarInfo 实现资源徽章和任务条颜色自定义

Resource View

资源视图

📄 Read: references/resource-view.md

viewType: 'ResourceView'
showOverAllocation
Resource grouping and display
Unassigned tasks grouped automatically at bottom
Taskbar drag and drop between resources (allowTaskbarDragAndDrop + RowDD module)

📄 阅读： references/resource-view.md

viewType: 'ResourceView'
showOverAllocation 配置
资源分组与展示
未分配任务自动聚合到视图底部
任务条在资源间拖拽（allowTaskbarDragAndDrop + RowDD 模块）

Resource Multi Taskbar

资源多任务条

📄 Read: references/multi-taskbar.md

enableMultiTaskbar for collapsed resource rows
Overlapping task visualization
Editing tasks in collapsed state

📄 阅读： references/multi-taskbar.md

为折叠的资源行启用 enableMultiTaskbar
重叠任务可视化
折叠状态下编辑任务

Work & Task Types

工作与任务类型

📄 Read: references/work.md

taskFields.work mapping, workUnit (Hour/Day/Minute)
FixedWork, FixedDuration, FixedUnit task types

📄 阅读： references/work.md

taskFields.work 映射、workUnit（小时/天/分钟）
FixedWork、FixedDuration、FixedUnit 三种任务类型

Columns

列配置

📄 Read: references/columns.md

columns array definition, treeColumnIndex
Checkbox columns, responsive columns
Column spanning, column templates
WBS column (enableWBS, enableAutoWbsUpdate)

📄 阅读： references/columns.md

columns 数组定义、treeColumnIndex 配置
复选框列、响应式列
列合并、列模板
WBS 列（enableWBS、enableAutoWbsUpdate）

Column Operations

列操作

📄 Read: references/column-operations.md

Column resizing (allowResizing, Resize module)
Column reordering (allowReordering, Reorder module)
Column menu (showColumnMenu)
Frozen/pinned columns (frozenColumns)

📄 阅读： references/column-operations.md

列宽调整（allowResizing、Resize 模块）
列重排序（allowReordering、Reorder 模块）
列菜单（showColumnMenu）
冻结/固定列（frozenColumns）

Timeline

时间线

📄 Read: references/timeline.md

topTier / bottomTier units and format
timelineSettings configuration
Custom timeline formatting, timeline tooltip

📄 阅读： references/timeline.md

topTier / bottomTier 单位与格式配置
timelineSettings 配置
自定义时间线格式化、时间线 tooltip

Zooming

缩放

📄 Read: references/timeline.md

ZoomIn, ZoomOut, ZoomToFit toolbar items
zoomingLevels configuration
Programmatic zoom control

📄 阅读： references/timeline.md

ZoomIn、ZoomOut、ZoomToFit 工具栏选项
zoomingLevels 配置
编程控制缩放

Sorting

排序

📄 Read: references/sorting.md

```
allowSorting: true
```
+
```
Sort
```
module injection
Click 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

📄 阅读： references/sorting.md

配置
```
allowSorting: true
```
+ 注入
```
Sort
```
模块
点击表头排序；Ctrl+点击实现多列排序；Shift+点击从多列排序中移除当前列
通过
```
sortSettings.columns
```
数组配置初始排序（字段 + 方向）

编程排序：

gantt.sortModule.sortColumn(field, direction, isMultiSort)

；清空排序：

gantt.clearSorting()

排序事件：

actionBegin

actionComplete

满足

args.requestType === 'sorting'

禁用指定列排序：
```
columns.allowSorting: false
```
自定义列（字符串/数值类型）可通过
```
sortSettings
```
或编程方式支持排序
触控操作：点击表头排序；触控设备上会弹出多列排序弹窗

Filtering

筛选

📄 Read: references/filtering.md

allowFiltering, Filter module
Menu filter and Excel-like filter
Column-level filtering, searching

📄 阅读： references/filtering.md

allowFiltering、Filter 模块
菜单筛选和类 Excel 筛选
列级别筛选、搜索

Selection

选择

📄 Read: references/selection.md

```
allowSelection: false
```
disables all selection;
```
Selection
```
module required
```
selectionSettings.mode
```
:
```
'Row'
```
(default) /
```
'Cell'
```
/
```
'Both'
```
```
selectionSettings.type
```
:
```
'Single'
```
(default) /
```
'Multiple'
```
(Ctrl+click for multi-select)
```
selectionSettings.enableToggle: true
```
— click selected item again to deselect
```
enableHover: true
```
— highlights rows, taskbars, header cells, and timeline cells on hover

Row 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 cells
Touch: tap to select a row; tap popup to enter multi-row select mode, then tap additional rows
Cell selection not supported with
```
enableVirtualization
```

📄 阅读： references/selection.md

配置
```
allowSelection: false
```
禁用所有选择；需要引入
```
Selection
```
模块
```
selectionSettings.mode
```
:
```
'Row'
```
（默认）/
```
'Cell'
```
/
```
'Both'
```

selectionSettings.type

'Single'

（默认）/

'Multiple'

（Ctrl+点击多选）

```
selectionSettings.enableToggle: true
```
— 再次点击已选中项可取消选中
```
enableHover: true
```
— hover 时高亮行、任务条、表头单元格、时间线单元格

行选择：

selectedRowIndex

配置初始选中行；

selectRow(index)

selectRows([indexes])

动态选择行

阻止行选择：
```
rowSelecting
```
事件中设置
```
args.cancel = true
```
；
```
rowDeselecting
```
阻止取消选中

单元格选择：

mode: 'Cell'

；

selectCell({ rowIndex, cellIndex })

动态选择单元格；

getSelectedRowCellIndexes()

{ cellIndexes, rowIndex }[]

阻止单元格选择：
```
cellSelecting
```
事件中设置
```
args.cancel = true
```
；选中完成后触发
```
cellSelected
```
事件

在

dataBound

事件中按条件选择行：通过

gantt.treeGrid.grid.dataSource

获取数据 +

gantt.selectRows(indexes)

实现

getSelectedRowIndexes()

→

number[]

；

getSelectedRecords()

→

object[]

```
gantt.clearSelection()
```
— 清空所有选中的行和单元格
触控操作：点击选中行；点击弹窗进入多行选择模式后可点击更多行选中
启用
```
enableVirtualization
```
时不支持单元格选择

Rows

行配置

📄 Read: references/rows.md

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)

📄 阅读： references/rows.md

通过 rowDataBound 事件、CSS（.e-altrow、.e-selectionbackground）、treeGrid 方法自定义行样式
在 rowDataBound 中通过 hasChildRecords 区分父行和子行样式
autoFocusTasks — 点击行时自动滚动到对应任务条位置
rowHeight — 统一行高；在 rowDataBound 中通过 args.rowHeight 自定义单行高度
通过 dataBound + mouseover + Tooltip 实现行 hover 自定义操作
通过 gantt.addRecord(data, position, index) 编程添加行，支持位置：Top/Bottom/Above/Below/Child
通过 treeGrid.getRowByIndex() + CSS display 属性动态显示/隐藏行
在 queryCellInfo 中通过 args.rowSpan 实现行合并（配合 colSpan 可实现2D合并）

Row Drag, Drop, Indent and Outdent

行拖拽、放置、缩进与 outdent

📄 Read: references/rows-drag-drop.md

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

📄 阅读： references/rows-drag-drop.md

RowDD 模块、allowRowDragAndDrop — 在甘特图内拖拽行
放置位置：上方（上边框）、下方（下边框）、子级（双边框）
在 load 事件中通过 treeGrid.rowDropSettings.targetID 配置拖拽行到外部组件
配置 selectionSettings.type: 'Multiple' 支持多行拖拽
allowTaskbarDragAndDrop — 拖拽任务条重排行顺序
通过 gantt.reorderRows(fromIndexes, toIndex, position) 编程重排行
拖拽生命周期事件：rowDragStartHelper、rowDragStart、rowDrag、rowDrop
当 dropPosition === 'middleSegment' 时可结合 reorderRows 阻止子级放置
缩进/Outdent 工具栏选项和 gantt.indent() / gantt.outdent() 方法
编程实现缩进/outdent：先 selectRow(i) 再调用 indent()/outdent()
通过 actionComplete 检测缩进/outdent 操作（args.requestType === 'indented'/'outdented'）

Managing Tasks (Editing)

任务管理（编辑）

📄 Read: references/managing-tasks.md

editSettings (allowAdding, allowEditing, allowDeleting)
Cell / Dialog / Taskbar editing modes
Add, delete, indent/outdent, drag-and-drop rows
Server-side CRUD, split/merge tasks, validation

📄 阅读： references/managing-tasks.md

editSettings 配置（allowAdding、allowEditing、allowDeleting）
单元格/对话框/任务条三种编辑模式
新增、删除、缩进/outdent、拖拽行操作
服务端 CRUD、拆分/合并任务、校验

Undo / Redo

撤销/重做

📄 Read: references/undo-redo.md

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

📄 阅读： references/undo-redo.md

注入 UndoRedo 模块、配置 enableUndoRedo 属性
undoRedoActions — 配置需要记录的操作类型（Edit、Delete、Add、Sorting、Filtering、ZoomIn/Out、ColumnReorder、ColumnResize、Indent、Outdent、RowDragAndDrop、TaskbarDragAndDrop、ColumnState、PreviousTimeSpan、NextTimeSpan）
undoRedoStepsCount — 限制历史记录深度（默认10；0表示禁用）
工具栏 Undo/Redo 选项支持UI操作历史
编程控制：undo() 和 redo() 方法
获取历史记录：getUndoActions() / getRedoActions()
重置历史记录：clearUndoCollection() / clearRedoCollection()

Toolbar

工具栏

📄 Read: references/toolbar.md

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

📄 阅读： references/toolbar.md

内置工具栏选项参考（Add、Edit、Delete、Update、Cancel、Search、ExpandAll、CollapseAll、Indent、Outdent、PrevTimeSpan、NextTimeSpan、ZoomIn、ZoomOut、ZoomToFit、Undo、Redo）
在 toolbarClick 事件中设置 args.cancel = true 可覆盖内置工具栏行为
通过 CSS (.e-tbar-btn-text) 隐藏文本标签仅展示图标
通过 CSS 类选择器自定义工具栏按钮外观
在 created 事件中通过 DOM 操作将工具栏移到底部
通过 ItemModel 自定义工具栏选项（text、id、prefixIcon、align）
支持在工具栏数组中混合内置和自定义选项
通过 gantt.toolbarModule.enableItems() 动态启用/禁用工具栏选项
通过 type: 'Input' + 模板可在工具栏中添加输入组件（AutoComplete、DropDownList）

Context Menu

右键菜单

📄 Read: references/context-menu.md

enableContextMenu, ContextMenu module
Default and custom context menu items

📄 阅读： references/context-menu.md

enableContextMenu、ContextMenu 模块
支持默认和自定义右键菜单选项

Event Markers

事件标记

📄 Read: references/event-markers.md

DayMarkers module, eventMarkers array
day, label, cssClass properties

📄 阅读： references/event-markers.md

DayMarkers 模块、eventMarkers 数组配置
day、label、cssClass 属性

Holidays

节假日

📄 Read: references/holidays.md

DayMarkers module, holidays array
from, to, label, cssClass properties

📄 阅读： references/holidays.md

DayMarkers 模块、holidays 数组配置
from、to、label、cssClass 属性

Data Markers (Indicators)

数据标记（指示器）

📄 Read: references/data-markers.md

taskFields.indicators mapping
date, iconClass, name, tooltip per indicator

📄 阅读： references/data-markers.md

taskFields.indicators 映射
每个指示器支持 date、iconClass、name、tooltip 配置

Task Labels

任务标签

📄 Read: references/labels.md

labelSettings: leftLabel, rightLabel, taskLabel
Field-based and template-based labels

📄 阅读： references/labels.md

labelSettings 配置：leftLabel、rightLabel、taskLabel
支持字段绑定和模板两种标签形式

Taskbar Customization

任务条自定义

📄 Read: references/taskbar.md

taskbarHeight, rowHeight
taskbarTemplate, parentTaskbarTemplate, milestoneTemplate
queryTaskbarInfo event for dynamic styling

📄 阅读： references/taskbar.md

taskbarHeight、rowHeight 配置
taskbarTemplate、parentTaskbarTemplate、milestoneTemplate 配置
通过 queryTaskbarInfo 事件实现动态样式

Scrolling

滚动

📄 Read: references/scrolling.md

scrollToDate method, scroll settings
Horizontal and vertical scroll control

📄 阅读： references/scrolling.md

scrollToDate 方法、滚动配置
水平和垂直滚动控制

Virtual Scrolling

虚拟滚动

📄 Read: references/virtual-scroll.md

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

📄 阅读： references/virtual-scroll.md

注入 VirtualScroll 模块、配置 enableVirtualization 开启行虚拟滚动
enableTimelineVirtualization — 水平时间线按需渲染（初始渲染3倍视口宽度）
虚拟滚动下获取筛选后记录数：actionComplete 事件 + gantt.treeGrid.filterModule.filteredResult
在 created 事件中通过 gantt.flatData.length 获取总数据集数量
限制：高度必须为像素值、资源视图下不支持多任务条、单元格选择状态不持久化

Splitter

分割栏

📄 Read: references/splitter.md

splitterSettings (position, columnIndex, view)
setSplitterPosition method, view modes

📄 阅读： references/splitter.md

splitterSettings 配置（position、columnIndex、view）
setSplitterPosition 方法、视图模式

State Persistence

状态持久化

📄 Read: references/state-persistence.md

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

📄 阅读： references/state-persistence.md

配置 enablePersistence 可将筛选、排序、列状态保存到 localStorage
localStorage 键格式："gantt" + 元素ID（例如 "ganttGantt"）
通过 window.localStorage.getItem / setItem 获取/设置持久化状态
在 dataBound 中重写 addOnPersist 可排除指定字段的持久化
默认不持久化的内容：列模板、格式化器、headerText、headerTemplate、值访问器
通过 getPersistData() + Object.assign + gantt.treeGrid.setProperties() 可恢复表头模板和表头文本

Immutable Mode

不可变模式

📄 Read: references/immutable.md

enableImmutableMode for performance
When to use immutable mode

📄 阅读： references/immutable.md

配置 enableImmutableMode 提升性能
不可变模式适用场景

Timezone

时区

📄 Read: references/timezone.md

timezone property (UTC, IANA zones)
Consistent time display across regions

📄 阅读： references/timezone.md

timezone 属性配置（UTC、IANA 时区）
跨区域时间展示一致性

Globalization & Localization

全球化与本地化

📄 Read: references/global-local.md

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

📄 阅读： references/global-local.md

本地化：

L10n.load({ 'de-DE': { gantt: { ... } } })

+ Gantt 实例配置

locale: 'de-DE'

按分类整理的全量本地化键表：任务字段/列、对话框/标签页、工具栏/操作、右键菜单/依赖、标签/时间线、前驱任务校验消息（
```
taskBeforePredecessor_FS
```
等）

新键与旧参考的对比：

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

国际化：
```
loadCldr(cagregorian, numbers)
```
+
```
setCulture()
```
实现本地化日期/数字格式化；CLDR 数据可从
```
@syncfusion/ej2-cldr-data
```
获取
RTL：配置
```
enableRtl: true
```
+ 对应 locale（例如
```
'ar-AE'
```
） — 反转文本方向和整体布局
默认 locale 为
```
'en-US'
```

Excel Export

Excel 导出

📄 Read: references/excel-export.md

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

📄 阅读： references/excel-export.md

ExcelExport 模块、
```
allowExcelExport
```
配置、工具栏选项：
```
ExcelExport
```
、
```
CsvExport
```
```
excelExport()
```
/
```
csvExport()
```
方法，第四个参数
```
isBlob
```
配置导出为 blob
自定义导出数据源（ExcelExportProperties 中的
```
dataSource
```
）
fileName、includeHiddenColumn、exportType 配置
导出时显示/隐藏列（toolbarClick 事件 + excelExportComplete 事件恢复）
单元格格式化（
```
excelQueryCellInfo
```
+
```
args.style.backColor
```
）
主题（表头/记录字体名称和颜色）、带超链接和样式的表头/表尾行
多甘特图导出：支持
```
AppendToSheet
```
（同个 sheet，可配置 blankRows）和
```
NewSheet
```
模式

PDF Export

PDF 导出

📄 Read: references/pdf-export.md

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

📄 阅读： references/pdf-export.md

PdfExport 模块、
```
allowPdfExport
```
配置、工具栏选项
fileName、pageOrientation、pageSize、exportType、includeHiddenColumn、showPredecessorLines 配置
导出当前视图数据、导出时显示/隐藏列
宽度自适应（isFitToWidth、chartWidth、gridWidth）、导出为 blob
页眉/页脚：支持文本、图片、线条、页码内容类型；enableFooter 配置
多甘特图导出到单个PDF、支持导出指示器
条件单元格格式化（pdfQueryCellInfo + PdfColor）
时间线单元格格式化（pdfQueryTimelineCellInfo）
任务条格式化 + 拆分任务条分段颜色（taskSegmentStyles）
ganttStyle：全量外观覆盖（列头、单元格、任务条、时间线、标签、事件标记、节假日）
支持导出列模板（图片/超链接）、任务条模板、标签模板、表头模板
通过 pdfColumnHeaderQueryCellInfo 实现表头模板导出

Loading Animation

加载动画

📄 Read: references/loading-animation.md

loadingIndicator.indicatorType: 'Shimmer' | 'Spinner'
Shimmer with virtual scroll

📄 阅读： references/loading-animation.md

loadingIndicator.indicatorType: 'Shimmer' | 'Spinner'
虚拟滚动下支持 Shimmer 效果

Accessibility

无障碍

📄 Read: references/accessibility.md

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

📄 阅读： references/accessibility.md

符合 WCAG 2.1 Level AA 标准
键盘导航（表格、工具栏、右键菜单快捷键）
ARIA 角色和属性（treegrid、row、gridcell、columnheader、dialog）
高对比度主题（highcontrast.css）
屏幕阅读器支持（NVDA、JAWS、VoiceOver） — 支持 taskbarAriaLabel 自定义
焦点管理和 autoFocusTasks 配置

Programmatic Methods

编程方法

📄 Read: references/gantt-methods.md

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 task

Split/Merge:

splitTask(taskId, splitDate | splitDate[])

mergeTask(taskId, segmentIndexes)

— requires

allowTaskbarEditing

; parent/milestones cannot be split

Selection:

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

module

Formatting helpers:

getDurationString(value, unit)

getWorkString(value, unit)

getTaskbarHeight()

All methods use the Gantt instance directly:
```
gantt.methodName(args)
```
(TypeScript/JavaScript)

📄 阅读： references/gantt-methods.md

列相关：

autoFitColumns(field?)

、

getGanttColumns()

、

getGridColumns()

、

refreshColumns()

、

reorderColumns(from, to)

、

removeSortColumn(field)

行/记录查询：

getRecordByID(id)

、

getTaskByUniqueID(uid)

、

getRowByID(id)

、

getRowByIndex(index)

、

getTaskInfo(taskId)

、

getCurrentViewData()

、

getExpandedRecords(records)

展开/折叠：

expandByIndex(index | index[])

、

collapseByIndex(index)

编辑/CRUD：

cancelEdit()

、

deleteRecord(taskDetail)

、

updateRecordByIndex(index, data)

、

updateTaskId(currentId, newId)

、

changeTaskMode(data)

、

convertToMilestone(id)

依赖相关：
```
removePredecessor(id)
```
— 移除任务的所有依赖

拆分/合并：

splitTask(taskId, splitDate | splitDate[])

、

mergeTask(taskId, segmentIndexes)

— 需要开启

allowTaskbarEditing

；父任务/里程碑不能拆分

选择相关：

selectCells(rowCellIndexes)

— 按

{ rowIndex, cellIndexes[] }

选择单元格；需要配置

mode: 'Cell'

滚动相关：

scrollToTask(taskId)

、

setScrollTop(px)

、

updateChartScrollOffset(left, top)

数据相关：

updateDataSource(dataSource, { projectStartDate, projectEndDate })

关键路径：

getCriticalTasks()

→

IGanttData[]

；需要开启

enableCriticalPath

+ 引入

CriticalPath

模块

格式化工具：

getDurationString(value, unit)

、

getWorkString(value, unit)

、

getTaskbarHeight()

所有方法直接通过 Gantt 实例调用：
```
gantt.methodName(args)
```
（TypeScript/JavaScript）

Events

事件

📄 Read: references/events.md

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

📄 阅读： references/events.md

actionBegin — 任意操作执行前触发（新增/编辑/删除/排序/筛选/依赖/缩放）；支持
```
args.cancel
```
；不同操作的参数类型不同（ITaskAddedEventArgs、ITimeSpanEventArgs、FilterEventArgs、SortEventArgs、IDependencyEventArgs、ZoomEventArgs）
actionComplete — 操作完成后触发；可通过
```
args.requestType
```
区分操作类型（filtering、sorting、save、delete、AfterZoomIn/Out/ToProject）
actionFailure — 操作失败时触发；通过
```
args.error[0]
```
获取错误详情
cellEdit — 表格单元格进入编辑模式时触发；设置
```
args.cancel = true
```
可阻止编辑；参数：cancel、cell、columnName、columnObject、row、rowData、value、validationRules
beforeTooltipRender — tooltip 渲染前触发（任务条/连接线/时间线）；可重写
```
args.content
```
或设置
```
args.cancel = true
```
取消渲染
beforeExcelExport / beforePdfExport — 导出前触发；设置
```
args.cancel = true
```
可中止导出；isCsv 标识区分 Excel 和 CSV 导出
单元格选择事件（需要配置
```
selectionSettings.mode: 'Cell'
```
或
```
'Both'
```
）：cellSelecting（设置cancel可阻止）、cellSelected、cellDeselecting、cellDeselected — CellSelectEventArgs（cellIndex、cells、currentCell、data、previousRowCell）和 CellDeselectEventArgs（cellIndexes、cells、data）
行选择事件：rowSelecting、rowSelected、rowDeselecting、rowDeselected — cancel、data、rowIndex、isCtrlPressed、isShiftPressed
列拖拽事件（需要配置
```
allowReordering: true
```
+ Reorder 模块）：columnDragStart、columnDrag、columnDrop — ColumnDragEventArgs（column、target、draggableType）
列菜单事件（需要配置
```
showColumnMenu: true
```
+ ColumnMenu 模块）：columnMenuOpen（ColumnMenuOpenEventArgs：cancel、column、element、items、left、top、parentItem）、columnMenuClick（ColumnMenuClickEventArgs：name、column、element、item）
contextMenuClick — 需要引入 ContextMenu 模块 + 配置 contextMenuItems；参数：name、element、event、item（id/text）、type、rowData
导出完成事件：excelExportComplete / pdfExportComplete — 通过
```
args.promise.then((e) => e.blobData)
```
获取 blob
requestType 参考表：beforeSave、beforeDelete、taskbarEditing、filtering、sorting、zoom 变体、save、delete、validateDependency、updateDependency