syncfusion-aspnetcore-gantt-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Syncfusion ASP.NET Core Gantt Chart

The Syncfusion EJ2 Gantt Chart for ASP.NET Core is a powerful project management component that visualizes project schedules, task dependencies, resource allocation, and timelines using Tag Helpers.

Syncfusion推出的面向ASP.NET Core的EJ2 Gantt Chart是一款功能强大的项目管理组件，可通过Tag Helpers可视化展示项目排期、任务依赖、资源分配和时间线。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

Set up and render a Gantt Chart in an ASP.NET Core application
Bind local or remote data to the Gantt control
Configure task fields, columns, and the chart timeline
Enable editing (cell, dialog, taskbar), manage tasks (add/delete/update)
Define task dependencies (FS, SS, FF, SF) and predecessors
Assign and display resources on tasks
Filter, sort, search, or select rows/cells
Export to Excel or PDF
Customize the timeline, taskbars, labels, holidays, and event markers
Configure task scheduling modes (Auto/Manual/Custom)
Enable undo/redo, state persistence, virtual scrolling, or critical path
Scroll the component, configure row height, or drag-and-drop rows
Set timezone or localise the UI for different cultures and RTL languages
Handle events (actionBegin, actionComplete, cellEdit) or call public methods programmatically

当你需要完成以下操作时可使用本技能：

在ASP.NET Core应用中搭建并渲染甘特图
将本地或远程数据绑定到甘特图控件
配置任务字段、列和图表时间线
启用编辑功能（单元格、对话框、任务条），管理任务（新增/删除/更新）
定义任务依赖关系（FS、SS、FF、SF）和前置任务
为任务分配并展示资源
筛选、排序、搜索或选中行/单元格
导出为Excel或PDF格式
自定义时间线、任务条、标签、节假日和事件标记
配置任务调度模式（自动/手动/自定义）
启用撤销/重做、状态持久化、虚拟滚动或关键路径功能
滚动组件、配置行高或拖拽行
设置时区或针对不同文化和RTL语言本地化UI
处理事件（actionBegin、actionComplete、cellEdit）或编程调用公共方法

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

NuGet package installation
Tag Helper import & CDN setup
Script manager registration
First Gantt control (Index.cshtml + Controller)
Mapping task fields & defining columns
Enabling editing, filtering, sorting

📄 阅读： references/getting-started.md

NuGet包安装
Tag Helper导入与CDN配置
脚本管理器注册
首个甘特图控件（Index.cshtml + Controller）
映射任务字段与定义列
启用编辑、筛选、排序功能

Data Binding

数据绑定

📄 Read: references/data-binding.md

Local hierarchical data binding
Local flat/self-referential data binding
Remote data (URL Adaptor, OData, Web API)
Load on demand (lazy loading child records)
DynamicObject and ExpandoObject binding

📄 阅读： references/data-binding.md

本地层级数据绑定
本地扁平/自引用数据绑定
远程数据（URL Adaptor、OData、Web API）
按需加载（懒加载子记录）
DynamicObject和ExpandoObject绑定

Columns

列配置

📄 Read: references/columns.md

Defining columns and field mapping
Custom column headers & header templates
Column templates & value accessors
Checkbox column, frozen columns
Column reordering, resizing, spanning
Responsive columns, WBS column, column menu

📄 阅读： references/columns.md

定义列和字段映射
自定义列表头与头部模板
列模板与值访问器
复选框列、冻结列
列重排、调整大小、跨列
响应式列、WBS列、列菜单

Managing Tasks (Editing)

任务管理（编辑）

📄 Read: references/managing-tasks.md

IsPrimaryKey requirement for CRUD
Cell editing, dialog editing, taskbar editing
Adding and deleting tasks
Indent / outdent tasks
Splitting and merging tasks
Server-side CRUD persistence
Edit validation and error handling

📄 阅读： references/managing-tasks.md

CRUD所需的IsPrimaryKey配置要求
单元格编辑、对话框编辑、任务条编辑
新增和删除任务
任务缩进/取消缩进
拆分和合并任务
服务端CRUD持久化
编辑校验与错误处理

Task Dependencies

任务依赖

📄 Read: references/task-dependency.md

SS, SF, FS, FF relationship types
Mapping dependency field
Predecessor offset values
Dependency editing via mouse drag
Validation, error handling, parent dependencies

📄 阅读： references/task-dependency.md

SS、SF、FS、FF关系类型
依赖字段映射
前置任务偏移值
通过鼠标拖拽编辑依赖关系
校验、错误处理、父级依赖

Resources

资源管理

📄 Read: references/resources.md

Resource collection and field mapping
Assigning resources to tasks
Resource view mode
Multi-taskbar display
Resource customization

📄 阅读： references/resources.md

资源集合与字段映射
为任务分配资源
资源视图模式
多任务条展示
资源自定义

Filtering

筛选

📄 Read: references/filtering.md

Menu filtering (column-level)
Excel-like filtering
Toolbar search / searching
Filter settings and programmatic filtering

📄 阅读： references/filtering.md

菜单筛选（列级别）
类Excel筛选
工具栏搜索
筛选配置与编程式筛选

Sorting

排序

📄 Read: references/sorting.md

Enabling sorting, multi-column sort
Initial sort configuration
Programmatic sort / clear sort

📄 阅读： references/sorting.md

启用排序、多列排序
初始排序配置
编程式排序/清空排序

Timeline

时间线

📄 Read: references/timeline.md

Top tier and bottom tier configuration
Zooming in and out
Custom timeline units and formats
Timeline template

📄 阅读： references/timeline.md

顶层和底层时间线配置
缩放功能
自定义时间线单位和格式
时间线模板

Task Scheduling

任务调度

📄 Read: references/task-scheduling.md

Auto, Manual, Custom scheduling modes
Duration units (day, hour, minute, week, month)
Unscheduled tasks
Task constraints (ALAP, ASAP, FNLT, SNLT, MSO, MFO)
Baseline display

📄 阅读： references/task-scheduling.md

自动、手动、自定义调度模式
时长单位（天、小时、分钟、周、月）
未排期任务
任务约束（ALAP、ASAP、FNLT、SNLT、MSO、MFO）
基线展示

Selection

选择功能

📄 Read: references/selection.md

Row selection and cell selection
Single/multiple selection modes
Programmatic selection

📄 阅读： references/selection.md

行选择和单元格选择
单选/多选模式
编程式选择

Scrolling

滚动

📄 Read: references/scrolling.md

Configure component
```
height
```
and
```
width
```
to enable scrollbars
Responsive sizing with
```
100%
```
and parent container height requirements
Programmatic timeline scroll via
```
scrollToDate()
```

Set vertical scroll with

ganttObj.ganttChartModule.scrollObject.setScrollTop()

📄 阅读： references/scrolling.md

配置组件
```
height
```
和
```
width
```
启用滚动条
基于
```
100%
```
和父容器高度要求的响应式尺寸适配
通过
```
scrollToDate()
```
实现编程式时间线滚动

通过

ganttObj.ganttChartModule.scrollObject.setScrollTop()

设置垂直滚动

Rows

行配置

📄 Read: references/rows.md

Configure global
```
rowHeight
```
and per-row expand state via
```
taskFields.expandState
```
Collapse all parent tasks at load with
```
collapseAllParentTasks
```
Customize row appearance with
```
rowDataBound
```
and
```
queryTaskbarInfo
```
Row spanning via
```
queryCellInfo.rowSpan
```
and clip modes for overflow

📄 阅读： references/rows.md

配置全局
```
rowHeight
```
，通过
```
taskFields.expandState
```
设置单行道展开状态
加载时折叠所有父任务：
```
collapseAllParentTasks
```
通过
```
rowDataBound
```
和
```
queryTaskbarInfo
```
自定义行外观
通过
```
queryCellInfo.rowSpan
```
实现行跨列，以及内容溢出裁剪模式

Row Drag And Drop

行拖拽

📄 Read: references/row-drag-and-drop.md

Enable row reordering with

allowRowDragAndDrop

and

selectionSettings.type = "Multiple"

for multi-drag

Allow taskbar-based drag with
```
allowTaskbarDragAndDrop
```
and edit mode
```
Auto
```

Lifecycle events:

rowDragStartHelper

rowDragStart

rowDrag

rowDrop

Programmatic reordering via

reorderRows(fromIndexes, toIndex, position)

📄 阅读： references/row-drag-and-drop.md

启用行重排：配置

allowRowDragAndDrop

和

selectionSettings.type = "Multiple"

实现多行拖拽

支持基于任务条的拖拽：配置
```
allowTaskbarDragAndDrop
```
和编辑模式
```
Auto
```

生命周期事件：

rowDragStartHelper

、

rowDragStart

、

rowDrag

、

rowDrop

通过

reorderRows(fromIndexes, toIndex, position)

实现编程式重排

Timezone

时区

📄 Read: references/timezone.md

Set
```
timezone
```
(e.g.,
```
UTC
```
,
```
America/New_York
```
) to normalise displayed dates across clients
CRUD operations respect configured timezone and convert for server persistence
Utility methods:
```
ej.schedule.Timezone().offset()
```
,
```
convert()
```
, and
```
remove()
```
for programmatic conversions

📄 阅读： references/timezone.md

设置
```
timezone
```
（例如
```
UTC
```
、
```
America/New_York
```
）以统一跨客户端展示的日期
CRUD操作遵循配置的时区，转换后再同步到服务端持久化

工具方法：

ej.schedule.Timezone().offset()

、

convert()

和

remove()

用于编程式时区转换

Globalization

全球化

📄 Read: references/globalization.md

Localize UI text via
```
locale
```
and
```
ej.base.L10n.load()
```
translation objects
Internationalization: load CLDR files to format dates and numbers per culture
Enable RTL layout with
```
enableRtl="true"
```
for right-to-left languages

📄 阅读： references/globalization.md

通过
```
locale
```
和
```
ej.base.L10n.load()
```
翻译对象实现UI文本本地化
国际化：加载CLDR文件以适配不同文化的日期和数字格式
为从右到左书写的语言启用RTL布局：
```
enableRtl="true"
```

Export (Excel & PDF)

导出（Excel & PDF）

📄 Read: references/export.md

Excel export with column and data customization
PDF export with themes and custom columns
Exporting multiple Gantt charts to a single PDF

📄 阅读： references/export.md

支持自定义列和数据的Excel导出
支持主题和自定义列的PDF导出
支持将多个甘特图导出到单个PDF文件

Toolbar

工具栏

📄 Read: references/toolbar.md

Built-in toolbar items (Add, Edit, Delete, Search, ExpandAll, CollapseAll, ExcelExport, PdfExport, ZoomIn, ZoomOut, ZoomToFit, UndoRedo)
Custom toolbar items and click handling
Enabling/disabling toolbar items programmatically

📄 阅读： references/toolbar.md

内置工具栏项（新增、编辑、删除、搜索、全部展开、全部折叠、导出Excel、导出PDF、放大、缩小、适应屏幕、撤销重做）
自定义工具栏项和点击事件处理
编程式启用/禁用工具栏项

Context Menu

右键菜单

📄 Read: references/context-menu.md

Enable context menu with
```
enableContextMenu="true"
```
Built-in context menu items for CRUD operations
Custom context menu items and click event handling

📄 阅读： references/context-menu.md

启用右键菜单：
```
enableContextMenu="true"
```
内置用于CRUD操作的右键菜单项
自定义右键菜单项和点击事件处理

Taskbar

任务条

📄 Read: references/taskbar.md

Taskbar height, custom templates, milestone appearance
Progress bar customization and connector line configuration
Segment taskbars (split tasks) rendering

📄 阅读： references/taskbar.md

任务条高度、自定义模板、里程碑外观
进度条自定义和连接线配置
分段任务条（拆分任务）渲染

Labels and Tooltips

标签和提示框

📄 Read: references/labels-and-tooltips.md

Left/right/inside label templates on taskbars
Taskbar tooltip customization via
```
tooltipSettings
```
Connector line and baseline tooltips

📄 阅读： references/labels-and-tooltips.md

任务条左侧/右侧/内部标签模板
通过
```
tooltipSettings
```
自定义任务条提示框
连接线和基线提示框

Event Markers

事件标记

📄 Read: references/event-markers.md

Add striplines/event markers with
```
<e-gantt-eventmarkers>
```
Custom label and CSS class per marker
Dynamic event markers

📄 阅读： references/event-markers.md

通过
```
<e-gantt-eventmarkers>
```
添加条形标记/事件标记
为每个标记自定义标签和CSS类
动态事件标记

Critical Path

关键路径

📄 Read: references/critical-path.md

Enable critical path highlighting with
```
enableCriticalPath="true"
```
Critical path rendering and customization
Critical slack value configuration

📄 阅读： references/critical-path.md

启用关键路径高亮：
```
enableCriticalPath="true"
```
关键路径渲染和自定义
关键松弛值配置

Splitter

分割栏

📄 Read: references/splitter.md

Configure grid/chart pane ratio with
```
splitterSettings
```
Set splitter position by column index, percentage, or pixel
Programmatic splitter position update via
```
setSplitterPosition()
```

📄 阅读： references/splitter.md

通过
```
splitterSettings
```
配置网格/图表面板占比
按列索引、百分比或像素设置分割栏位置
通过
```
setSplitterPosition()
```
编程式更新分割栏位置

Undo and Redo

撤销和重做

📄 Read: references/undo-redo.md

Enable undo/redo via toolbar items or
```
Ctrl+Z
```
/
```
Ctrl+Y
```
Configure undo-redo history size (
```
undoRedoStepsCount
```
)
Supported actions and programmatic
```
undo()
```
/
```
redo()
```
calls

📄 阅读： references/undo-redo.md

通过工具栏项或
```
Ctrl+Z
```
/
```
Ctrl+Y
```
启用撤销/重做
配置撤销重做历史记录大小：
```
undoRedoStepsCount
```
支持的操作和编程式
```
undo()
```
/
```
redo()
```
调用

State Persistence

状态持久化

📄 Read: references/state-persistence.md

Enable persistence with
```
enablePersistence="true"
```
(saves to
```
localStorage
```
)
Persisted properties: filter, sort, column width, scroll position, zoom level
Clearing persisted state programmatically

📄 阅读： references/state-persistence.md

启用状态持久化：
```
enablePersistence="true"
```
（保存到
```
localStorage
```
）
持久化属性：筛选、排序、列宽、滚动位置、缩放级别
编程式清空持久化状态

Immutable Mode

不可变模式

📄 Read: references/immutable-mode.md

Enable
```
enableImmutableMode="true"
```
to prevent re-render of unchanged rows
Performance benefit for large data sets with frequent updates
Limitations and usage patterns

📄 阅读： references/immutable-mode.md

启用
```
enableImmutableMode="true"
```
以避免未修改行重新渲染
针对频繁更新的大数据集的性能优化
限制和使用模式

Virtual Scroll

虚拟滚动

📄 Read: references/virtual-scroll.md

Enable row virtualization with
```
enableVirtualization="true"
```
Enable timeline virtualization with
```
enableTimelineVirtualization="true"
```
Performance characteristics and known limitations

📄 阅读： references/virtual-scroll.md

启用行虚拟化：
```
enableVirtualization="true"
```
启用时间线虚拟化：
```
enableTimelineVirtualization="true"
```
性能特性和已知限制

Loading Animation

加载动画

📄 Read: references/loading-animation.md

Built-in spinner shown during data load
Show/hide loading indicator programmatically via
```
showSpinner()
```
/
```
hideSpinner()
```
Custom loading template

📄 阅读： references/loading-animation.md

数据加载期间展示内置加载指示器
通过
```
showSpinner()
```
/
```
hideSpinner()
```
编程式展示/隐藏加载指示器
自定义加载模板

Style and Appearance

样式和外观

📄 Read: references/style-and-appearance.md

Applying Syncfusion themes (Bootstrap, Material, Fabric, High Contrast)
CSS class overrides for taskbars, grid rows, and header
```
queryTaskbarInfo
```
event for per-task styling

📄 阅读： references/style-and-appearance.md

应用Syncfusion主题（Bootstrap、Material、Fabric、高对比度）
覆盖任务条、网格行、头部的CSS类
```
queryTaskbarInfo
```
事件用于单任务样式定制

Events

事件

📄 Read: references/events.md

Wire events via camelCase Tag Helper attributes (
```
actionBegin
```
,
```
actionComplete
```
,
```
actionFailure
```
)
```
actionBegin
```
— cancel-able hook before every CRUD, filter, sort, zoom, and dependency action
```
actionComplete
```
— post-action callback with
```
requestType
```
reference table
```
cellEdit
```
— prevent specific cells or rows from entering edit mode
```
beforeTooltipRender
```
— customise or suppress any tooltip dynamically

Row/cell selection events:

rowSelecting

rowSelected

rowDeselecting

rowDeselected

cellSelecting

cellSelected

Export events:

beforeExcelExport

beforePdfExport

excelExportComplete

pdfExportComplete

📄 阅读： references/events.md

通过小驼峰格式的Tag Helper属性绑定事件（
```
actionBegin
```
、
```
actionComplete
```
、
```
actionFailure
```
）
```
actionBegin
```
— 所有CRUD、筛选、排序、缩放、依赖操作前的可取消钩子
```
actionComplete
```
— 操作完成后的回调，附带
```
requestType
```
参考表
```
cellEdit
```
— 阻止特定单元格或行进入编辑模式
```
beforeTooltipRender
```
— 动态自定义或隐藏任意提示框

行/单元格选择事件：

rowSelecting

、

rowSelected

、

rowDeselecting

、

rowDeselected

、

cellSelecting

、

cellSelected

导出事件：

beforeExcelExport

、

beforePdfExport

、

excelExportComplete

、

pdfExportComplete

Public Methods

公共方法

📄 Read: references/methods.md

Data access:

getCurrentViewData()

getRecordByID()

getTaskByUniqueID()

getRowByID()

Row expand/collapse:

expandAll()

collapseAll()

expandByID()

collapseByID()

expandByIndex()

Task utilities:

changeTaskMode()

convertToMilestone()

updateTaskId()

updateDataSource()

Scrolling:

scrollToDate()

scrollToTask()

setScrollTop()

updateChartScrollOffset()

Search:
```
search(keyword)
```
— programmatic search across displayed columns

Lifecycle:

refresh()

dataBind()

getRootElement()

addEventListener()

removeEventListener()

Module injection reference table (
```
ej.gantt.Filter
```
,
```
Edit
```
,
```
RowDD
```
,
```
CriticalPath
```
, etc.)

📄 阅读： references/methods.md

数据访问：

getCurrentViewData()

、

getRecordByID()

、

getTaskByUniqueID()

、

getRowByID()

行展开/折叠：

expandAll()

、

collapseAll()

、

expandByID()

、

collapseByID()

、

expandByIndex()

任务工具方法：

changeTaskMode()

、

convertToMilestone()

、

updateTaskId()

、

updateDataSource()

滚动：

scrollToDate()

、

scrollToTask()

、

setScrollTop()

、

updateChartScrollOffset()

搜索：
```
search(keyword)
```
— 跨展示列编程式搜索

生命周期：

refresh()

、

dataBind()

、

getRootElement()

、

addEventListener()

、

removeEventListener()

模块注入参考表（
```
ej.gantt.Filter
```
、
```
Edit
```
、
```
RowDD
```
、
```
CriticalPath
```
等）

Quick Start Example

快速开始示例

cshtml

@* ~/Pages/Index.cshtml *@
<ejs-gantt id="Gantt"
           dataSource="ViewBag.DataSource"
           height="450px">
    <e-gantt-taskfields id="TaskId"
                        name="TaskName"
                        startDate="StartDate"
                        endDate="EndDate"
                        duration="Duration"
                        progress="Progress"
                        child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>

csharp

// HomeController.cs
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

cshtml

@* ~/Pages/Index.cshtml *@
<ejs-gantt id="Gantt"
           dataSource="ViewBag.DataSource"
           height="450px">
    <e-gantt-taskfields id="TaskId"
                        name="TaskName"
                        startDate="StartDate"
                        endDate="EndDate"
                        duration="Duration"
                        progress="Progress"
                        child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>

csharp

// HomeController.cs
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Common Patterns

常用实现模式

Enable Editing

启用编辑功能

cshtml

<ejs-gantt id="Gantt" dataSource="ViewBag.DataSource" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" progress="Progress"
                        child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowEditing="true" allowAdding="true"
                          allowDeleting="true" allowTaskbarEditing="true"
                          mode="Auto">
    </e-gantt-editsettings>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" isPrimaryKey="true"></e-gantt-column>
        <e-gantt-column field="TaskName"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>

cshtml

<ejs-gantt id="Gantt" dataSource="ViewBag.DataSource" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" progress="Progress"
                        child="SubTasks">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowEditing="true" allowAdding="true"
                          allowDeleting="true" allowTaskbarEditing="true"
                          mode="Auto">
    </e-gantt-editsettings>
    <e-gantt-columns>
        <e-gantt-column field="TaskId" isPrimaryKey="true"></e-gantt-column>
        <e-gantt-column field="TaskName"></e-gantt-column>
    </e-gantt-columns>
</ejs-gantt>

Enable Filtering and Sorting

启用筛选和排序

cshtml

<ejs-gantt id="Gantt" dataSource="ViewBag.DataSource"
           allowFiltering="true" allowSorting="true" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" progress="Progress"
                        child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>

cshtml

<ejs-gantt id="Gantt" dataSource="ViewBag.DataSource"
           allowFiltering="true" allowSorting="true" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" progress="Progress"
                        child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>

Toolbar with Export

带导出功能的工具栏

cshtml

<ejs-gantt id="Gantt" dataSource="ViewBag.DataSource"
           toolbar="@(new List<string>() { "Add","Edit","Delete","Cancel","Update","ExpandAll","CollapseAll","ExcelExport","PdfExport" })"
           allowExcelExport="true" allowPdfExport="true" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>

cshtml

<ejs-gantt id="Gantt" dataSource="ViewBag.DataSource"
           toolbar="@(new List<string>() { "Add","Edit","Delete","Cancel","Update","ExpandAll","CollapseAll","ExcelExport","PdfExport" })"
           allowExcelExport="true" allowPdfExport="true" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>