syncfusion-aspnetcore-gantt-chart

Syncfusion ASP.NET Core 甘特图

用于 ASP.NET Core 的 Syncfusion EJ2 甘特图是一款功能强大的项目管理组件，可通过 Tag Helpers 可视化项目计划、任务依赖关系、资源分配和时间线。

何时使用此技能

在需要以下功能时使用此技能：

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

文档和导航指南

入门

📄 阅读： references/getting-started.md

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

数据绑定

📄 阅读： references/data-binding.md

• 本地分层数据绑定
• 本地平面／自引用数据绑定
• 远程数据（URL Adaptor、OData、Web API）
• 按需加载（延迟加载子记录）
• DynamicObject 和 ExpandoObject 绑定

列

📄 阅读： references/columns.md

• 定义列和字段映射
• 自定义列标题和标题模板
• 列模板和值访问器
• 复选框列、冻结列
• 列重新排序、调整大小、跨列
• 响应式列、WBS 列、列菜单

管理任务（编辑）

📄 阅读： references/managing-tasks.md

• CRUD 的 IsPrimaryKey 要求
• 单元格编辑、对话框编辑、任务栏编辑
• 添加和删除任务
• 缩进／取消缩进任务
• 拆分和合并任务
• 服务器端 CRUD 持久化
• 编辑验证和错误处理

任务依赖关系

📄 阅读： references/task-dependency.md

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

资源

📄 阅读： references/resources.md

• 资源集合和字段映射
• 为任务分配资源
• 资源视图模式
• 多任务栏显示
• 资源自定义

筛选

📄 阅读： references/filtering.md

• 菜单筛选（列级）
• 类似 Excel 的筛选
• 工具栏搜索／搜索
• 筛选设置和编程式筛选

排序

📄 阅读： references/sorting.md

• 启用排序、多列排序
• 初始排序配置
• 编程式排序／清除排序

时间线

📄 阅读： references/timeline.md

• 配置上层和下层
• 时间线视图模式（Hour、Day、Week、Month、Year）
• 自定义时间线单位和格式
• 时间线模板
• 无限时间线滚动
• 放大和缩小

任务排程

📄 阅读： references/task-scheduling.md

• Auto、Manual、Custom 排程模式
• 工期单位（day、hour、minute、week、month）
• 未排程任务
• 任务约束（ALAP、ASAP、FNLT、SNLT、MSO、MFO）

基线

📄 阅读： references/baseline.md

• 基线功能概览和用例
• 基线日期字段映射（baselineStartDate、baselineEndDate、baselineDuration）
• 使用 renderBaseline 启用基线显示，并自定义 baselineColor
• 使用显式的零工期渲染基线里程碑
• 基线条的 CSS 样式
• 基线模板和动态自定义
• 渲染多个基线，以比较多个规划阶段

选择

📄 阅读： references/selection.md

• 行选择和单元格选择
• 单选／多选模式
• 以编程方式进行选择

滚动

📄 阅读： references/scrolling.md

• 配置组件的 height 和 width 以启用滚动条
• 使用 100% 实现自适应尺寸，并满足父容器高度要求
• 使用 scrollToDate() 以编程方式滚动时间轴
• 使用 ganttObj.ganttChartModule.scrollObject.setScrollTop() 设置垂直滚动位置

行

📄 阅读： references/rows.md

• 配置全局 rowHeight，并通过 taskFields.expandState 设置各行的展开状态
• 使用 collapseAllParentTasks 在加载时折叠所有父任务
• 使用 rowDataBound 和 queryTaskbarInfo 自定义行的外观
• 通过 queryCellInfo.rowSpan 跨行，并设置溢出裁剪模式

行拖放

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

• 使用 allowRowDragAndDrop 启用行重排；多行拖放时将 selectionSettings.type 设为 "Multiple"
• 使用 allowTaskbarDragAndDrop 和 Auto 编辑模式启用基于任务条的拖放
• 生命周期事件：rowDragStartHelper、rowDragStart、rowDrag、rowDrop
• 使用 reorderRows(fromIndexes, toIndex, position) 以编程方式重排行

时区

📄 阅读： references/timezone.md

• 设置 timezone（例如 UTC、America/New_York），以便在不同客户端之间统一显示日期
• CRUD 操作遵循已配置的时区，并在持久化到服务端时进行转换
• 实用方法：ej.schedule.Timezone().offset()、convert() 和 remove()，用于以编程方式进行转换

全球化

📄 阅读： references/globalization.md

• 使用 locale 和 ej.base.L10n.load() 翻译对象本地化 UI 文本
• 国际化：加载 CLDR 文件，根据区域设置格式化日期和数字
• 使用 enableRtl="true" 为从右向左书写的语言启用 RTL 布局

导出（Excel 和 PDF）

📄 阅读： references/export.md

• 导出 Excel 并自定义列和数据
• 导出 PDF 并使用主题和自定义列
• 将多个甘特图导出到同一个 PDF

工具栏

📄 阅读： references/toolbar.md

• 内置工具栏项目（Add、Edit、Delete、Search、ExpandAll、CollapseAll、ExcelExport、PdfExport、ZoomIn、ZoomOut、ZoomToFit、UndoRedo）
• 自定义工具栏项目和点击处理
• 以编程方式启用／禁用工具栏项目

上下文菜单

📄 阅读： references/context-menu.md

• 使用 enableContextMenu="true" 启用上下文菜单
• 内置的 CRUD 操作上下文菜单项目
• 自定义上下文菜单项目和点击事件处理

任务条

📄 阅读： references/taskbar.md

• 使用 text/x-jsrender 编写任务条模板（taskbarTemplate、parentTaskbarTemplate、milestoneTemplate）
• 使用 taskbarHeight 控制任务条尺寸（必须小于 rowHeight）
• 使用 queryTaskbarInfo 动态设置任务条／进度样式（例如 taskbarBgColor、progressBarBgColor、isCritical）
• 通过 CSS 覆盖更改拖动手柄图标
• 使用 connectorLineWidth 和 connectorLineBackground 自定义依赖关系连接线
• 在项目视图中使用 enableMultiTaskbar="true" 显示多个任务条

标签和工具提示

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

• 任务栏上的左侧／右侧／内部标签模板
• 通过 tooltipSettings 自定义任务栏工具提示
• 连接线和基线工具提示

事件标记

📄 阅读： references/event-markers.md

• 使用 <e-gantt-eventmarkers> 添加条带线／事件标记
• 为每个标记自定义标签和 CSS 类
• 动态事件标记

关键路径

📄 阅读： references/critical-path.md

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

分隔条

📄 阅读： references/splitter.md

• 使用 splitterSettings 配置网格／图表窗格比例
• 按列索引、百分比或像素设置分隔条位置
• 通过 setSplitterPosition() 以编程方式更新分隔条位置

撤销和重做

📄 阅读： references/undo-redo.md

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

状态持久化

📄 阅读： references/state-persistence.md

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

不可变模式

📄 阅读： references/immutable-mode.md

• 启用 enableImmutableMode="true"，避免重新渲染未更改的行
• 适用于频繁更新的大型数据集，可提升性能
• 限制和使用模式

虚拟滚动

📄 阅读： references/virtual-scroll.md

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

加载动画

📄 阅读： references/loading-animation.md

• 加载数据时显示内置加载动画
• 通过 showSpinner() / hideSpinner() 以编程方式显示／隐藏加载指示器
• 自定义加载模板

样式和外观

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

• 应用 Syncfusion 主题（Bootstrap、Material、Fabric、High Contrast）
• 为任务栏、网格行和表头覆盖 CSS 类
• 使用 queryTaskbarInfo 事件按任务自定义样式

事件

📄 阅读： references/events.md

• 通过 camelCase Tag Helper 属性（actionBegin、actionComplete、actionFailure）绑定事件
• actionBegin — 每次 CRUD、筛选、排序、缩放和依赖项操作前的可取消钩子
• actionComplete — 操作完成后的回调，附带 requestType 参考表
• cellEdit — 阻止特定单元格或行进入编辑模式
• beforeTooltipRender — 动态自定义或隐藏任何工具提示
• 行／单元格选择事件：rowSelecting、rowSelected、rowDeselecting、rowDeselected、cellSelecting、cellSelected
• 导出事件：beforeExcelExport、beforePdfExport、excelExportComplete、pdfExportComplete

公共方法

📄 阅读： 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 等）

快速入门示例

@* ~/Pages/Index.cshtml *@
<ejs-gantt id='Gantt' dataSource="Model.GanttDataSourceCollection" height="450px">
    <e-gantt-taskfields id="TaskId"
                        name="TaskName"
                        startDate="StartDate"
                        endDate="EndDate"
                        duration="Duration"
                        progress="Progress"
                        parentID="ParentID">
    </e-gantt-taskfields>
</ejs-gantt>

// ~/Pages/Index.cshtml.cs
public class IndexModel : PageModel
{
    public List<GanttDataSource> GanttDataSourceCollection { get; set; }

    public void OnGet()
    {
        GanttDataSourceCollection = GetTaskCollection();
    }

    private List<GanttDataSource> GetTaskCollection()
    {
        return new List<GanttDataSource>()
        {
            new GanttDataSource() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21) },
            new GanttDataSource() { TaskId = 2, TaskName = "Identify site location", StartDate = new DateTime(2019, 04, 02), Duration = 4, Progress = 50, ParentID = 1 },
            new GanttDataSource() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = 4, Progress = 50, ParentID = 1 },
            new GanttDataSource() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = 4, Progress = 50, ParentID = 1 },
            new GanttDataSource() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21) },
            new GanttDataSource() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = 3, Progress = 50, ParentID = 5 },
            new GanttDataSource() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = 3, Progress = 50, ParentID = 5 }
        };
    }
}

public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public int? ParentID { get; set; }

常见模式

启用编辑

<ejs-gantt id="Gantt" dataSource="Model.GanttDataSourceCollection" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" progress="Progress"
                        parentID="ParentID">
    </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>

启用筛选和排序

<ejs-gantt id="Gantt" dataSource="Model.GanttDataSourceCollection"
           allowFiltering="true" allowSorting="true" height="450px">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                        endDate="EndDate" duration="Duration" progress="Progress"
                        parentID="ParentID">
    </e-gantt-taskfields>
</ejs-gantt>

带导出的工具栏

<ejs-gantt id="Gantt" dataSource="Model.GanttDataSourceCollection"
           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" parentID="ParentID">
    </e-gantt-taskfields>
</ejs-gantt>