syncfusion-blazor-gantt-chart

What this skill does

# Implementing Syncfusion Blazor Gantt Chart

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

---

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

---

### 1. Getting Started

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

📄 **Read:** [references/getting-started-webassembly.md](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](references/getting-started-server.md)
- Blazor Server-specific setup and services
- Service registration in Program.cs
- Component initialization differences

---

### 2. Data Binding and Remote Data

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

📄 **Read:** [references/data-binding-and-field-mapping.md](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](references/remote-data-adaptors.md)
- UrlAdaptor for REST APIs
- Custom DataAdaptor implementation
- Handling CRUD, search, filter, sort operations
- Injecting services and passing parameters

---

### 3. Task Management

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

📄 **Read:** [references/task-scheduling-and-hierarchy.md](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](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](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](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](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

---

### 4. Timeline Configuration

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

📄 **Read:** [references/timeline-configuration.md](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](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](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](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)

---

### 5. Resources

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

📄 **Read:** [references/resources-and-allocation.md](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:** [ref