syncfusion-blazor-gantt-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion Blazor Gantt Chart

实现Syncfusion Blazor甘特图

When to Use This Skill

何时使用此技能

Use this skill when the user needs to:

Implement project scheduling interfaces similar to Microsoft Project with visual timeline and task management
Display hierarchical task structures with parent-child relationships, dependencies, and progress tracking
Enable interactive timeline editing through drag-and-drop taskbars, resize operations, and dependency linking
Manage project resources including personnel allocation, workload tracking, and overallocation detection
Configure complex timelines with custom zoom levels, working hours, holidays, time zones, and duration units
Export project data to Excel, CSV, or PDF formats with customizable layouts and styling
Handle remote data through Entity Framework, Dapper, custom adaptors, or REST API connections
Implement critical path analysis for identifying tasks that impact project completion dates
Create resource views showing task allocation and utilization across team members and equipment

This skill provides comprehensive guidance for the

SfGantt<TValue>

component, covering all aspects from basic setup through advanced features like split tasks, baseline tracking, and custom PDF exports.

当用户需要以下功能时，可使用此技能：

实现类似Microsoft Project的项目调度界面，包含可视化时间线和任务管理功能
展示层级化任务结构，支持父子任务关系、任务依赖和进度追踪
启用交互式时间线编辑，支持任务栏拖拽、调整大小和依赖关联操作
管理项目资源，包括人员分配、工作量追踪和资源过载检测
配置复杂时间线，支持自定义缩放级别、工作时长、节假日、时区和时长单位
导出项目数据为Excel、CSV或PDF格式，支持自定义布局和样式
处理远程数据，可通过Entity Framework、Dapper、自定义适配器或REST API连接数据源
实现关键路径分析，识别影响项目完成日期的关键任务
创建资源视图，展示跨团队成员和设备的任务分配与资源利用率

此技能为

SfGantt<TValue>

组件提供全面指导，涵盖从基础设置到拆分任务、基准线追踪和自定义PDF导出等高级功能的所有方面。

Documentation and Navigation Guide

文档与导航指南

This skill is organized into 14 major sections. Each section contains focused reference files covering specific features. Use this navigation guide to identify which reference to read based on the user's needs.

本技能分为14个主要章节，每个章节包含针对特定功能的参考文档。可根据用户需求，参考以下导航指南选择对应的文档阅读。

1. Getting Started

1. 快速入门

When to read: Initial setup, installation, platform-specific configuration

📄 Read: references/getting-started-webassembly.md

NuGet package installation for Blazor WebAssembly
Basic component setup and registration
CSS theme imports and configuration
First minimal Gantt chart example
Task data model and field mapping

📄 Read: references/getting-started-server.md

Blazor Server-specific setup and services
Service registration in Program.cs
Component initialization differences

阅读时机： 初始设置、安装、平台特定配置

📄 阅读文档： references/getting-started-webassembly.md

Blazor WebAssembly的NuGet包安装
基础组件设置与注册
CSS主题导入与配置
最简甘特图示例
任务数据模型与字段映射

📄 阅读文档： references/getting-started-server.md

Blazor Server专属设置与服务
Program.cs中的服务注册
组件初始化差异

2. Data Binding and Remote Data

2. 数据绑定与远程数据

When to read: Setting up data sources, connecting to databases, custom data adaptors

📄 Read: references/data-binding-and-field-mapping.md

Hierarchical and self-referential data structures
GanttTaskFields configuration and mapping
Required vs optional fields
SfDataManager integration
Load-on-demand for large datasets

📄 Read: references/remote-data-adaptors.md

UrlAdaptor for REST APIs
Custom DataAdaptor implementation
Handling CRUD, search, filter, sort operations
Injecting services and passing parameters

阅读时机： 设置数据源、连接数据库、自定义数据适配器

📄 阅读文档： references/data-binding-and-field-mapping.md

层级化与自引用数据结构
GanttTaskFields配置与映射
必填与可选字段
SfDataManager集成
大数据集的按需加载

📄 阅读文档： references/remote-data-adaptors.md

用于REST API的UrlAdaptor
自定义DataAdaptor实现
处理CRUD、搜索、过滤、排序操作
注入服务与传递参数

3. Task Management

3. 任务管理

When to read: Creating, editing, deleting tasks, dependencies, scheduling, undo/redo, critical path

📄 Read: references/task-scheduling-and-hierarchy.md

Nested hierarchical vs self-referential (ParentID) data structures
Task types: parent (rollup), child (work item), milestone (zero-duration), unscheduled
Auto-scheduling and manual scheduling approaches
Duration units: Day, Hour, Minute
Hierarchy effects: parent rollup, expand/collapse, indent/outdent

📄 Read: references/task-crud-operations.md

Enable editing — GanttEditSettings (AllowAdding, AllowEditing, AllowDeleting, AllowTaskbarEditing)
Edit modes — Auto, Dialog, Taskbar
Adding tasks via toolbar, context menu, or programmatic API
Dialog customization — expose only selected fields in the edit form
Remote CRUD — InsertUrl, UpdateUrl, RemoveUrl, BatchUrl
Delete behavior — cascade rules and child handling

📄 Read: references/task-dependencies-and-validation.md

Dependency types: FS, SS, FF, SF
Predecessor field mapping via GanttTaskFields.Dependency
Dependency string format (e.g.,
```
3FS
```
,
```
5SS+2d
```
)
Circular dependency detection
Auto-scheduling interaction with dependency changes

📄 Read: references/critical-path-and-analysis.md

EnableCriticalPath — highlights critical tasks in red automatically
GanttCriticalPathSettings.SlackValue — widen critical zone to near-critical tasks
"CriticalPath" toolbar item — user-facing toggle
QueryChartRowInfo + GanttTaskModel.IsCritical — custom critical taskbar color/style
GetCriticalTasksAsync() — retrieve critical task list programmatically
Calculation rules: progress < 100%, dependency-driven, recalculates on every change

📄 Read: references/undo-redo-and-state.md

EnableUndoRedo + UndoRedoActions list — track 23 action types (Add, Edit, Delete, TaskbarEdit, Sort, Filter, ZoomIn/Out, Indent/Outdent, RowDragAndDrop, etc.)
MaxUndoRedoSteps — limit history size (default: 20)
UndoAsync() / RedoAsync() — programmatic undo/redo
"Undo" / "Redo" toolbar items — keyboard shortcut Ctrl+Z / Ctrl+Y
OnUndoRedo event — react after undo/redo with CanUndo/CanRedo state
State preservation patterns — expand/collapse, selection, zoom, filters, scroll position

阅读时机： 创建、编辑、删除任务，任务依赖、调度、撤销/重做、关键路径

📄 阅读文档： references/task-scheduling-and-hierarchy.md

嵌套层级与自引用（ParentID）数据结构
任务类型：父任务（汇总）、子任务（工作项）、里程碑（零时长）、未调度任务
自动调度与手动调度方式
时长单位：天、小时、分钟
层级影响：父任务汇总、展开/折叠、缩进/取消缩进

📄 阅读文档： references/task-crud-operations.md

启用编辑——GanttEditSettings（AllowAdding、AllowEditing、AllowDeleting、AllowTaskbarEditing）
编辑模式——自动、对话框、任务栏
通过工具栏、右键菜单或编程API添加任务
对话框自定义——在编辑表单中仅展示选定字段
远程CRUD——InsertUrl、UpdateUrl、RemoveUrl、BatchUrl
删除行为——级联规则与子任务处理

📄 阅读文档： references/task-dependencies-and-validation.md

依赖类型：FS（完成-开始）、SS（开始-开始）、FF（完成-完成）、SF（开始-完成）
通过GanttTaskFields.Dependency映射前置任务字段
依赖字符串格式（例如：
```
3FS
```
、
```
5SS+2d
```
）
循环依赖检测
自动调度与依赖变更的交互

📄 阅读文档： references/critical-path-and-analysis.md

EnableCriticalPath——自动将关键任务标记为红色
GanttCriticalPathSettings.SlackValue——扩展关键区域至近关键任务
"CriticalPath"工具栏项——用户可切换显示
QueryChartRowInfo + GanttTaskModel.IsCritical——自定义关键任务栏颜色/样式
GetCriticalTasksAsync()——通过编程方式获取关键任务列表
计算规则：进度<100%、依赖驱动、每次变更时重新计算

📄 阅读文档： references/undo-redo-and-state.md

EnableUndoRedo + UndoRedoActions列表——追踪23种操作类型（添加、编辑、删除、任务栏编辑、排序、过滤、放大/缩小、缩进/取消缩进、行拖拽等）
MaxUndoRedoSteps——限制历史记录数量（默认：20）
UndoAsync() / RedoAsync()——编程式撤销/重做
"Undo" / "Redo"工具栏项——快捷键Ctrl+Z / Ctrl+Y
OnUndoRedo事件——撤销/重做后触发，返回CanUndo/CanRedo状态
状态保留模式——展开/折叠、选择、缩放、过滤、滚动位置

4. Timeline Configuration

4. 时间线配置

When to read: Timeline views, zoom levels, working hours, holidays, time zones, effort tracking

📄 Read: references/timeline-configuration.md

Single-tier vs dual-tier timeline layouts
GanttTimelineSettings, GanttTopTierSettings, GanttBottomTierSettings
TimelineViewMode units: Hour, Day, Week, Month, Year
TimelineUnitSize — controls cell width / density
Format strings for tier labels
ProjectStartDate / ProjectEndDate for visible date range

📄 Read: references/zooming-and-view-control.md

ZoomIn, ZoomOut, ZoomToFit toolbar items
ZoomToFit — fits the entire schedule into the visible viewport
Programmatic zoom via toolbar or code
Recommended defaults: day/week for operational, week/month for roadmap views

📄 Read: references/working-time-holidays-timezone.md

DayWorkingTime — define working hours per day (e.g., 8-hour day)
WorkWeek — specify which days are working days
GanttHolidays / GanttHoliday — non-working dates with From/To/Label
Timezone considerations for multi-region teams
Impact on task duration calculations and auto-scheduling

📄 Read: references/work-and-effort-tracking.md

Work field mapping in GanttTaskFields.Work
Task types: FixedDuration, FixedWork, FixedUnit
Work = Duration × WorkingHoursPerDay × (Unit / 100)
Resource allocation units affect work calculation
WorkUnit property (Hour, Day, Minute)

阅读时机： 时间线视图、缩放级别、工作时长、节假日、时区、工作量追踪

📄 阅读文档： references/timeline-configuration.md

单层与双层时间线布局
GanttTimelineSettings、GanttTopTierSettings、GanttBottomTierSettings
TimelineViewMode单位：小时、天、周、月、年
TimelineUnitSize——控制单元格宽度/密度
层级标签的格式字符串
ProjectStartDate / ProjectEndDate——可见日期范围

📄 阅读文档： references/zooming-and-view-control.md

ZoomIn、ZoomOut、ZoomToFit工具栏项
ZoomToFit——将整个调度内容适配至可见视口
通过工具栏或代码实现编程式缩放
推荐默认设置：日常调度用天/周视图，路线图用周/月视图

📄 阅读文档： references/working-time-holidays-timezone.md

DayWorkingTime——定义每日工作时长（例如：8小时工作制）
WorkWeek——指定工作日
GanttHolidays / GanttHoliday——非工作日，包含From/To/Label
跨区域团队的时区考量
对任务时长计算与自动调度的影响

📄 阅读文档： references/work-and-effort-tracking.md

GanttTaskFields.Work中的工作量字段映射
任务类型：固定时长、固定工作量、固定单位
工作量 = 时长 × 每日工作时长 × (单位 / 100)
资源分配单位影响工作量计算
WorkUnit属性（小时、天、分钟）

5. Resources

5. 资源管理

When to read: Resource assignment, resource views, overallocation detection, assignment CRUD

📄 Read: references/resources-and-allocation.md

GanttResource — DataSource, Id, Name, MaxUnits, Group field mappings
GanttAssignmentFields — PrimaryKey, TaskID, ResourceID, Units
ResourceData model (ResourceId, ResourceName, MaxUnit) + AssignmentModel (PrimaryId, TaskID, ResourceId, Unit)
Assign resources via cell editing (GanttResourceColumn), dialog, or programmatically
AddResourceAssignmentAsync / UpdateResourceAssignmentAsync / DeleteResourceAssignmentAsync
Task types with resources: FixedDuration, FixedWork, FixedUnit
ViewType.ResourceView — resource-centric hierarchy (resources as parents, tasks as children)
ShowOverallocation="true" — highlights over-allocated date ranges in resource view
Over-allocation = daily work from all tasks > DayWorkingHours × MaxUnits / 100
GanttLabelSettings.RightLabel="Resources" — show resource names in taskbar label

📄 Read: references/assignment-fields-and-resource-mapping.md

GanttAssignmentFields<TValue, TAssignment> class and properties
Resource assignment collection and foreign key relationships
AddResourceAssignmentAsync, UpdateResourceAssignmentAsync, DeleteResourceAssignmentAsync
Many-to-many task-resource mapping patterns
Resource allocation units and percentage tracking

阅读时机： 资源分配、资源视图、过载检测、分配CRUD

📄 阅读文档： references/resources-and-allocation.md

GanttResource——DataSource、Id、Name、MaxUnits、Group字段映射
GanttAssignmentFields——PrimaryKey、TaskID、ResourceID、Units
资源数据模型（ResourceId、ResourceName、MaxUnit）+ 分配模型（PrimaryId、TaskID、ResourceId、Unit）
通过单元格编辑（GanttResourceColumn）、对话框或编程方式分配资源
AddResourceAssignmentAsync / UpdateResourceAssignmentAsync / DeleteResourceAssignmentAsync
带资源的任务类型：固定时长、固定工作量、固定单位
ViewType.ResourceView——以资源为中心的层级结构（资源为父项，任务为子项）
ShowOverallocation="true"——在资源视图中高亮显示资源过载的日期范围
过载判定：所有任务的每日工作量 > 每日工作时长 × MaxUnits / 100
GanttLabelSettings.RightLabel="Resources"——在任务栏标签中显示资源名称

📄 阅读文档： references/assignment-fields-and-resource-mapping.md

GanttAssignmentFields<TValue, TAssignment>类与属性
资源分配集合与外键关系
AddResourceAssignmentAsync、UpdateResourceAssignmentAsync、DeleteResourceAssignmentAsync
任务-资源多对多映射模式
资源分配单位与百分比追踪

6. Task Segments and Splitting

6. 任务分段与拆分

When to read: Split tasks, task segments, interrupted schedules, paused work

📄 Read: references/segment-fields-and-split-tasks.md

GanttSegmentFields<TValue, TSegments> — PrimaryKey, TaskID, StartDate, EndDate field mappings
Segment data model: separate collection linked to tasks via TaskID
SplitTaskAsync — split a task at a specified date programmatically
MergeTaskAsync — merge segments back into a single task
UI-based splitting via context menu or dialog
Segment taskbar rendering — multiple connected bars with gaps
Use cases: planned breaks, resource unavailability, approval pauses

阅读时机： 拆分任务、任务分段、中断式调度、暂停工作

📄 阅读文档： references/segment-fields-and-split-tasks.md

GanttSegmentFields<TValue, TSegments>——PrimaryKey、TaskID、StartDate、EndDate字段映射
分段数据模型：通过TaskID关联至任务的独立集合
SplitTaskAsync——通过编程方式在指定日期拆分任务
MergeTaskAsync——将分段合并为单个任务
通过右键菜单或对话框实现UI拆分
分段任务栏渲染——多个带间隙的连接任务栏
使用场景：计划内休息、资源不可用、审批暂停

7. Visualization

7. 可视化配置

When to read: Taskbar templates, baselines, markers, labels, interactive taskbar editing

📄 Read: references/taskbar-and-templates.md

GanttTemplates.TaskbarTemplate — custom RenderFragment for taskbar content
GanttTooltipSettings.TaskbarTemplate — custom tooltip content
ShowBaseline / BaselineColor / BaselineStart / BaselineEnd — planned vs actual comparison
TaskbarHeight / RowHeight — size control
Performance note: combine complex templates with EnableVirtualization

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

GanttEventMarkers / GanttEventMarker — vertical timeline lines with Date, Text, CssClass
GanttLabelSettings — LeftLabel, RightLabel, TopLabel with field name or template
Data markers via TaskbarTemplate — conditional icons based on task properties
Limit markers to essential dates to avoid timeline clutter

📄 Read: references/taskbar-editing.md

AllowTaskbarEditing="true" in GanttEditSettings
Drag to move task — updates StartDate and EndDate
Resize left/right handle — adjusts start or end date
Drag progress handle — updates Progress field
TaskbarEdited event — receives TaskbarEditedEventArgs<TValue>
OnActionBegin — validate or cancel taskbar edits via args.Cancel

阅读时机： 任务栏模板、基准线、标记、标签、交互式任务栏编辑

📄 阅读文档： references/taskbar-and-templates.md

GanttTemplates.TaskbarTemplate——任务栏内容的自定义RenderFragment
GanttTooltipSettings.TaskbarTemplate——自定义提示框内容
ShowBaseline / BaselineColor / BaselineStart / BaselineEnd——计划与实际对比
TaskbarHeight / RowHeight——尺寸控制
性能提示：复杂模板需结合EnableVirtualization使用

📄 阅读文档： references/markers-and-labels.md

GanttEventMarkers / GanttEventMarker——带Date、Text、CssClass的垂直时间线标记
GanttLabelSettings——LeftLabel、RightLabel、TopLabel，支持字段名或模板
通过TaskbarTemplate实现数据标记——根据任务属性显示条件图标
仅保留必要日期标记，避免时间线杂乱

📄 阅读文档： references/taskbar-editing.md

在GanttEditSettings中设置AllowTaskbarEditing="true"
拖拽移动任务——更新StartDate和EndDate
拖拽左右手柄——调整开始或结束日期
拖拽进度手柄——更新Progress字段
TaskbarEdited事件——接收TaskbarEditedEventArgs<TValue>
OnActionBegin——通过args.Cancel验证或取消任务栏编辑

8. Grid Columns

8. 网格列配置

When to read: Column configuration, types, formatting, show/hide, autofit, validation, reordering, resizing, frozen columns, column menu

📄 Read: references/column-basics-and-formatting.md

GanttColumn definition (Field, HeaderText, Width, TextAlign, Format, Type, Visible)
Column types including DateOnly, TimeOnly, Checkbox
Number formatting (N, C, P variants) and date formatting (custom pattern strings)
AutoFit columns — AutoFitColumnsAsync called in DataBound event
Show or hide columns programmatically — ShowColumnsAsync / HideColumnsAsync
TreeColumnIndex — move expand/collapse tree icons to a different column
HideAtMedia — responsive columns via CSS media queries
Per-column action controls: AllowEditing, AllowFiltering, AllowSorting, AllowReordering, AllowResizing

📄 Read: references/column-interactions.md

Column reordering — AllowReordering on SfGantt and per-column override
Column resizing — AllowResizing, MinWidth, MaxWidth; double-click to autofit
Frozen columns — FrozenColumns (first N) vs IsFrozen per column (not combinable)
Freeze direction — FreezeDirection.Left / FreezeDirection.Right with IsFrozen
Draggable freeze line — AllowFreezeLineMoving
Column menu — ShowColumnMenu on SfGantt with required companions (AllowSorting, AllowFiltering, AllowResizing)
Built-in column menu items: Sort Ascending, Sort Descending, AutoFit, AutoFit All, Column Chooser, Filter
Disable column menu per column — GanttColumn.ShowColumnMenu="false"
Column chooser — ShowColumnChooser + "ColumnChooser" toolbar item

📄 Read: references/column-validation-and-editing.md

Enable editing — GanttEditSettings, IsPrimaryKey on key column
Inline ValidationRules — Required, RangeLength, Range, Number, Min, Max, Messages dictionary
Data annotation validation — [Required], [StringLength], [Range] on model class
Custom validation attribute — inherit ValidationAttribute, override IsValid()
Custom validator component — GanttEditSettings.Validator + ValidatorTemplateContext + ShowValidationMessage + IDisposable
Per-column EditType — DefaultEdit, NumericEdit, DatePickerEdit, DateTimePickerEdit, BooleanEdit, DropDownEdit
Note: validation not supported for Resource column

阅读时机： 列配置、类型、格式化、显示/隐藏、自适应、验证、重排序、调整大小、冻结列、列菜单

📄 阅读文档： references/column-basics-and-formatting.md

GanttColumn定义（Field、HeaderText、Width、TextAlign、Format、Type、Visible）
列类型包括DateOnly、TimeOnly、Checkbox
数字格式化（N、C、P变体）与日期格式化（自定义模式字符串）
自适应列——在DataBound事件中调用AutoFitColumnsAsync
通过编程方式显示或隐藏列——ShowColumnsAsync / HideColumnsAsync
TreeColumnIndex——将展开/折叠树图标移至其他列
HideAtMedia——通过CSS媒体查询实现响应式列
列级操作控制：AllowEditing、AllowFiltering、AllowSorting、AllowReordering、AllowResizing

📄 阅读文档： references/column-interactions.md

列重排序——在SfGantt上设置AllowReordering，支持列级覆盖
列调整大小——AllowResizing、MinWidth、MaxWidth；双击自适应
冻结列——FrozenColumns（前N列）与列级IsFrozen（不可组合使用）
冻结方向——结合IsFrozen设置FreezeDirection.Left / FreezeDirection.Right
可拖拽冻结线——AllowFreezeLineMoving
列菜单——在SfGantt上设置ShowColumnMenu，需搭配AllowSorting、AllowFiltering、AllowResizing
内置列菜单项：升序排序、降序排序、自适应、全部自适应、列选择器、过滤
列级禁用列菜单——GanttColumn.ShowColumnMenu="false"
列选择器——ShowColumnChooser + "ColumnChooser"工具栏项

📄 阅读文档： references/column-validation-and-editing.md

启用编辑——GanttEditSettings，在主键列设置IsPrimaryKey
内联ValidationRules——Required、RangeLength、Range、Number、Min、Max、Messages字典
数据注解验证——在模型类上使用[Required]、[StringLength]、[Range]
自定义验证属性——继承ValidationAttribute，重写IsValid()
自定义验证器组件——GanttEditSettings.Validator + ValidatorTemplateContext + ShowValidationMessage + IDisposable
列级EditType——DefaultEdit、NumericEdit、DatePickerEdit、DateTimePickerEdit、BooleanEdit、DropDownEdit
注意：Resource列不支持验证

9. Rows and Selection

9. 行与选择

When to read: Row operations, cell/row selection modes

📄 Read: references/rows-and-height.md

RowHeight configuration
AutoFitRows feature
Row template customization
Row-level styling

📄 Read: references/selection-modes.md

SelectionSettings (Mode, Type, CellSelectionMode)
Row selection (Single/Multiple)
Cell selection (Box/Flow/BoxWithBorder)
Programmatic selection APIs (SelectRow, SelectCell)

阅读时机： 行操作、单元格/行选择模式

📄 阅读文档： references/rows-and-height.md

RowHeight配置
AutoFitRows功能
行模板自定义
行级样式

📄 阅读文档： references/selection-modes.md

SelectionSettings（Mode、Type、CellSelectionMode）
行选择（单/多选）
单元格选择（Box/Flow/BoxWithBorder）
编程式选择API（SelectRow、SelectCell）

10. Interactions

10. 交互功能

When to read: User interactions, filtering, sorting, searching

📄 Read: references/filtering-and-search.md

FilterSettings (Type: Menu, Excel)
FilterHierarchyMode (Parent, Child, Both, None)
Search functionality (SearchSettings)
Column-level filtering

📄 Read: references/sorting-operations.md

AllowSorting configuration
Single and multi-column sorting
SortSettings (Columns collection)
Programmatic sorting APIs

📄 Read: references/context-menu-and-toolbar.md

Toolbar built-in items (18 items) and custom items with Align support
Mixed built-in + custom toolbar using List<Object>
Enable/disable toolbar items dynamically via EnableItems method
Context menu — EnableContextMenu, built-in items, custom items, sub-menus
Disable context menu for specific columns via ContextMenuOpen event
ContextMenuItemClicked event for custom item handling

📄 Read: references/touch-and-interaction-modes.md

Touch interaction support
EnableTouch property
Splitter for resizing grid/chart panes
SplitterSettings configuration

📄 Read: references/clipboard-and-accessibility.md

Copy/paste functionality
Clipboard module integration
Keyboard navigation
Accessibility features

阅读时机： 用户交互、过滤、排序、搜索

📄 阅读文档： references/filtering-and-search.md

FilterSettings（Type: Menu、Excel）
FilterHierarchyMode（Parent、Child、Both、None）
搜索功能（SearchSettings）
列级过滤

📄 阅读文档： references/sorting-operations.md

AllowSorting配置
单列与多列排序
SortSettings（Columns集合）
编程式排序API

📄 阅读文档： references/context-menu-and-toolbar.md

工具栏内置项（18项）与带Align支持的自定义项
使用List<Object>混合内置与自定义工具栏
通过EnableItems方法动态启用/禁用工具栏项
右键菜单——EnableContextMenu、内置项、自定义项、子菜单
通过ContextMenuOpen事件为特定列禁用右键菜单
ContextMenuItemClicked事件——处理自定义项

📄 阅读文档： references/touch-and-interaction-modes.md

触摸交互支持
EnableTouch属性
用于调整网格/图表窗格大小的拆分器
SplitterSettings配置

📄 阅读文档： references/clipboard-and-accessibility.md

复制/粘贴功能
剪贴板模块集成
键盘导航
无障碍功能

11. Performance

11. 性能优化

When to read: Optimization strategies, large datasets

📄 Read: references/virtualization-and-performance.md

EnableRowVirtualization for large datasets
Row and column virtualization
Frozen columns (FrozenColumns property)
WebAssembly performance optimization tips
Best practices for handling 10,000+ tasks

阅读时机： 优化策略、大数据集处理

📄 阅读文档： references/virtualization-and-performance.md

为大数据集启用EnableRowVirtualization
行与列虚拟化
冻结列（FrozenColumns属性）
WebAssembly性能优化技巧
处理10000+任务的最佳实践

12. Export

12. 导出功能

When to read: PDF and Excel export features

📄 Read: references/pdf-export.md

PdfExport() method
PdfExportProperties configuration
Multi-page PDF export
Header and footer customization
Page size and styling in PDF
Template-based PDF export

📄 Read: references/excel-export.md

ExcelExport() method
ExcelExportProperties configuration
Column formatting in Excel
Hierarchical data export
Custom cell styling

阅读时机： PDF与Excel导出功能

📄 阅读文档： references/pdf-export.md

PdfExport()方法
PdfExportProperties配置
多页PDF导出
页眉与页脚自定义
PDF中的页面大小与样式
基于模板的PDF导出

📄 阅读文档： references/excel-export.md

ExcelExport()方法
ExcelExportProperties配置
Excel中的列格式化
层级化数据导出
自定义单元格样式

13. API Reference

13. API参考

When to read: Detailed API documentation lookup

📄 Read: references/gantt-methods-properties.md

SfGantt<TValue> main component
GanttTaskFields mapping
GanttColumn configuration
GanttResource properties
GanttSegment for task splitting

📄 Read: references/api-settings-classes.md

GanttEditSettings (AllowAdding, AllowEditing, AllowDeleting, Mode)
GanttSelectionSettings (Mode, Type, CellSelectionMode)
GanttFilterSettings (Type, HierarchyMode)
GanttSortSettings and GanttSearchSettings
GanttTimelineSettings and GanttSplitterSettings

📄 Read: references/api-event-args.md

GanttActionEventArgs<TValue>
BeforeTooltipRenderEventArgs<TValue>
BeforeCopyEventArgs
Other event argument classes

📄 Read: references/api-enums-and-types.md

EditMode (Auto, Dialog, Taskbar)
DependencyType (FS, SF, FF, SS)
DurationUnit (Day, Hour, Minute)
FilterType, ViewType, GridLine enums
Other enum types

阅读时机： 查阅详细API文档

📄 阅读文档： references/gantt-methods-properties.md

SfGantt<TValue>主组件
GanttTaskFields映射
GanttColumn配置
GanttResource属性
用于任务拆分的GanttSegment

📄 阅读文档： references/api-settings-classes.md

GanttEditSettings（AllowAdding、AllowEditing、AllowDeleting、Mode）
GanttSelectionSettings（Mode、Type、CellSelectionMode）
GanttFilterSettings（Type、HierarchyMode）
GanttSortSettings与GanttSearchSettings
GanttTimelineSettings与GanttSplitterSettings

📄 阅读文档： references/api-event-args.md

GanttActionEventArgs<TValue>
BeforeTooltipRenderEventArgs<TValue>
BeforeCopyEventArgs
其他事件参数类

📄 阅读文档： references/api-enums-and-types.md

EditMode（Auto、Dialog、Taskbar）
DependencyType（FS、SF、FF、SS）
DurationUnit（Day、Hour、Minute）
FilterType、ViewType、GridLine枚举
其他枚举类型

Quick Start Example

快速入门示例

razor

@page "/gantt"
@using Syncfusion.Blazor.Gantt

<SfGantt DataSource="@TaskCollection" Height="450px" Width="100%">
    <GanttTaskFields Id="TaskId" 
                     Name="TaskName" 
                     StartDate="StartDate" 
                     EndDate="EndDate"
                     Duration="Duration" 
                     Progress="Progress" 
                     ParentID="ParentId"
                     Dependency="Predecessor">
    </GanttTaskFields>
</SfGantt>

@code {
    private List<TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        TaskCollection = new List<TaskData>
        {
            new TaskData { TaskId = 1, TaskName = "Project Initiation", StartDate = new DateTime(2024, 04, 01), EndDate = new DateTime(2024, 04, 05), Progress = 100 },
            new TaskData { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2024, 04, 01), Duration = 4, Progress = 50, ParentId = 1 },
            new TaskData { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2024, 04, 01), Duration = 3, Progress = 70, Predecessor = "2", ParentId = 1 },
        };
    }

    public class TaskData
    {
        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; }
        public string Predecessor { get; set; }
    }
}

razor

@page "/gantt"
@using Syncfusion.Blazor.Gantt

<SfGantt DataSource="@TaskCollection" Height="450px" Width="100%">
    <GanttTaskFields Id="TaskId" 
                     Name="TaskName" 
                     StartDate="StartDate" 
                     EndDate="EndDate"
                     Duration="Duration" 
                     Progress="Progress" 
                     ParentID="ParentId"
                     Dependency="Predecessor">
    </GanttTaskFields>
</SfGantt>

@code {
    private List<TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        TaskCollection = new List<TaskData>
        {
            new TaskData { TaskId = 1, TaskName = "Project Initiation", StartDate = new DateTime(2024, 04, 01), EndDate = new DateTime(2024, 04, 05), Progress = 100 },
            new TaskData { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2024, 04, 01), Duration = 4, Progress = 50, ParentId = 1 },
            new TaskData { TaskId = 3, TaskName = "Perform Soil test", StartDate = new DateTime(2024, 04, 01), Duration = 3, Progress = 70, Predecessor = "2", ParentId = 1 },
        };
    }

    public class TaskData
    {
        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; }
        public string Predecessor { get; set; }
    }
}

Common Patterns

常见模式

Pattern 1: Full CRUD with Dialog Editing

模式1：带对话框编辑的完整CRUD

razor

<SfGantt DataSource="@TaskCollection" Toolbar="@ToolbarItems">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" 
                     EndDate="EndDate" Duration="Duration" Progress="Progress" 
                     ParentID="ParentId" Dependency="Predecessor">
    </GanttTaskFields>
    <GanttEditSettings AllowAdding="true" 
                       AllowEditing="true" 
                       AllowDeleting="true"
                       AllowTaskbarEditing="true"
                       Mode="EditMode.Dialog">
    </GanttEditSettings>
</SfGantt>

@code {
    private List<string> ToolbarItems = new List<string> { "Add", "Edit", "Delete" };
}

razor

<SfGantt DataSource="@TaskCollection" Toolbar="@ToolbarItems">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" 
                     EndDate="EndDate" Duration="Duration" Progress="Progress" 
                     ParentID="ParentId" Dependency="Predecessor">
    </GanttTaskFields>
    <GanttEditSettings AllowAdding="true" 
                       AllowEditing="true" 
                       AllowDeleting="true"
                       AllowTaskbarEditing="true"
                       Mode="EditMode.Dialog">
    </GanttEditSettings>
</SfGantt>

@code {
    private List<string> ToolbarItems = new List<string> { "Add", "Edit", "Delete" };
}

Pattern 2: Critical Path with Resource Allocation

模式2：带资源分配的关键路径

razor

<SfGantt DataSource="@TaskCollection" 
         Resources="@ResourceCollection"
         EnableCriticalPath="true">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" 
                     EndDate="EndDate" Duration="Duration" 
                     ResourceInfo="Resources" Work="Work">
    </GanttTaskFields>
    <GanttResource DataSource="@ResourceCollection" 
                   Id="ResourceId" 
                   Name="ResourceName">
    </GanttResource>
    <GanttCriticalPathSettings SlackValue="1"></GanttCriticalPathSettings>
</SfGantt>

razor

<SfGantt DataSource="@TaskCollection" 
         Resources="@ResourceCollection"
         EnableCriticalPath="true">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" 
                     EndDate="EndDate" Duration="Duration" 
                     ResourceInfo="Resources" Work="Work">
    </GanttTaskFields>
    <GanttResource DataSource="@ResourceCollection" 
                   Id="ResourceId" 
                   Name="ResourceName">
    </GanttResource>
    <GanttCriticalPathSettings SlackValue="1"></GanttCriticalPathSettings>
</SfGantt>

Pattern 3: Remote Data with Entity Framework

模式3：结合Entity Framework的远程数据

razor

<SfGantt TValue="TaskData">
    <SfDataManager Adaptor="Adaptors.UrlAdaptor" Url="api/gantt"></SfDataManager>
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" 
                     EndDate="EndDate" Duration="Duration" ParentID="ParentId">
    </GanttTaskFields>
</SfGantt>

razor

<SfGantt TValue="TaskData">
    <SfDataManager Adaptor="Adaptors.UrlAdaptor" Url="api/gantt"></SfDataManager>
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" 
                     EndDate="EndDate" Duration="Duration" ParentID="ParentId">
    </GanttTaskFields>
</SfGantt>

Pattern 4: Export with Custom Styling

模式4：带自定义样式的导出

razor

<SfGantt @ref="GanttRef" 
         DataSource="@TaskCollection" 
         AllowPdfExport="true" 
         AllowExcelExport="true"
         Toolbar="@ToolbarItems">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate">
    </GanttTaskFields>
    <GanttEvents TValue="TaskData" OnToolbarClick="ToolbarClickHandler"></GanttEvents>
</SfGantt>

@code {
    private SfGantt<TaskData> GanttRef;
    private List<string> ToolbarItems = new List<string> { "PdfExport", "ExcelExport" };

    private async Task ToolbarClickHandler(ClickEventArgs args)
    {
        if (args.Item.Id == "PdfExport")
            await GanttRef.ExportToPdfAsync();
        else if (args.Item.Id == "ExcelExport")
            await GanttRef.ExportToExcelAsync();
    }
}

razor

<SfGantt @ref="GanttRef" 
         DataSource="@TaskCollection" 
         AllowPdfExport="true" 
         AllowExcelExport="true"
         Toolbar="@ToolbarItems">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate">
    </GanttTaskFields>
    <GanttEvents TValue="TaskData" OnToolbarClick="ToolbarClickHandler"></GanttEvents>
</SfGantt>

@code {
    private SfGantt<TaskData> GanttRef;
    private List<string> ToolbarItems = new List<string> { "PdfExport", "ExcelExport" };

    private async Task ToolbarClickHandler(ClickEventArgs args)
    {
        if (args.Item.Id == "PdfExport")
            await GanttRef.ExportToPdfAsync();
        else if (args.Item.Id == "ExcelExport")
            await GanttRef.ExportToExcelAsync();
    }
}

Key Configuration Points

关键配置要点

Essential Properties

核心属性

DataSource: Task collection (hierarchical or self-referential)
GanttTaskFields: Maps task properties (Id, Name, StartDate, Duration, ParentID, Dependency)
Height/Width: Component dimensions
Toolbar: Built-in actions (Add, Edit, Delete, Search, Export)
GanttEditSettings: CRUD permissions and edit mode

DataSource: 任务集合（层级化或自引用）
GanttTaskFields: 映射任务属性（Id、Name、StartDate、Duration、ParentID、Dependency）
Height/Width: 组件尺寸
Toolbar: 内置操作（添加、编辑、删除、搜索、导出）
GanttEditSettings: CRUD权限与编辑模式

Timeline Configuration

时间线配置

DurationUnit: Default duration unit (Day, Hour, Minute)
ProjectStartDate/ProjectEndDate: Timeline boundaries
GanttTimelineSettings: Timeline tiers, format, zoom levels
DayWorkingTime: Working hours per day
Holidays: Non-working dates

DurationUnit: 默认时长单位（天、小时、分钟）
ProjectStartDate/ProjectEndDate: 时间线边界
GanttTimelineSettings: 时间线层级、格式、缩放级别
DayWorkingTime: 每日工作时长
Holidays: 非工作日

Visual Customization

可视化自定义

GanttTaskbarSettings: Taskbar height and styling
GanttLabelSettings: Left, right, top labels
GanttTemplates: Custom taskbar, tooltip, milestone templates
BaselineColor/ConnectorLineBackground: Visual styling

GanttTaskbarSettings: 任务栏高度与样式
GanttLabelSettings: 左侧、右侧、顶部标签
GanttTemplates: 自定义任务栏、提示框、里程碑模板
BaselineColor/ConnectorLineBackground: 视觉样式

Performance Optimization

性能优化

EnableRowVirtualization: For large datasets (1000+ tasks)
EnableColumnVirtualization: For many columns
LoadChildOnDemand: Lazy-load child tasks
TreeColumnIndex: Specify hierarchy column

EnableRowVirtualization: 用于大数据集（1000+任务）
EnableColumnVirtualization: 用于多列场景
LoadChildOnDemand: 懒加载子任务
TreeColumnIndex: 指定层级列

Common Use Cases

常见使用场景

Project Management Dashboard: Full CRUD, dependencies, critical path, resource allocation
Construction Scheduling: Baseline tracking, split tasks, holidays, custom working hours
Resource Planning: Resource view, overallocation detection, work-based scheduling
Sprint Planning: Timeline zooming, milestone tracking, progress indicators
Manufacturing Timeline: Multi-level hierarchy, dependency validation, PDF export

项目管理仪表盘: 完整CRUD、任务依赖、关键路径、资源分配
施工调度: 基准线追踪、拆分任务、节假日、自定义工作时长
资源规划: 资源视图、过载检测、基于工作量的调度
迭代规划: 时间线缩放、里程碑追踪、进度指标
制造时间线: 多层级结构、依赖验证、PDF导出

Next Steps

后续步骤

After reviewing this navigation guide:

For initial setup: Start with section 1 (Getting Started) based on your platform
For data connectivity: Review section 2 (Data Binding) for your data source type
For specific features: Navigate to the relevant section and read focused reference files
For API details: Consult section 13 (API Reference) for properties, methods, and classes

Events reference: Event argument types are documented in
references/api-event-args.md
. Individual feature files (e.g.,
taskbar-editing.md
,
filtering-and-search.md
,
sorting-operations.md
,
selection-modes.md
) each document the events specific to that feature with handler signatures and examples.

Each reference file provides complete implementation details, code examples, edge cases, and troubleshooting guidance for its specific topic.

阅读完本导航指南后：

初始设置: 根据你的平台，从第1章（快速入门）开始
数据连接: 根据数据源类型，查看第2章（数据绑定）
特定功能: 导航至对应章节，阅读聚焦的参考文档
API详情: 查阅第13章（API参考）获取属性、方法与类的信息

事件参考: 事件参数类型记录在
references/api-event-args.md
中。各功能文档（如
taskbar-editing.md
、
filtering-and-search.md
、
sorting-operations.md
、
selection-modes.md
）分别记录了对应功能的事件，包含处理程序签名与示例。

每个参考文档都提供了完整的实现细节、代码示例、边界情况与故障排除指南。