Implementing Syncfusion Blazor Gantt Chart

When to Use This Skill

• 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

SfGantt<TValue>

Documentation and Navigation Guide

1. Getting Started

• 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

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

2. Data Binding and Remote Data

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

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

3. Task Management

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 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

6. Task Segments and Splitting

• 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

7. Visualization

• 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

• 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

• 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

8. Grid Columns

• 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

• 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

• 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

9. Rows and Selection

• RowHeight configuration
• AutoFitRows feature
• Row template customization
• Row-level styling

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

10. Interactions

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

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

• 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

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

• Copy/paste functionality
• Clipboard module integration
• Keyboard navigation
• Accessibility features

11. Performance

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

12. Export

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

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

13. API Reference

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

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

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

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

Quick Start Example

@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

<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

<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

<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

<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

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

Visual Customization

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

Performance Optimization

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

Common Use Cases

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

Next Steps

1. For initial setup: Start with section 1 (Getting Started) based on your platform
2. For data connectivity: Review section 2 (Data Binding) for your data source type
3. For specific features: Navigate to the relevant section and read focused reference files
4. 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.