Blazorise Gantt: Data Binding

Bind Gantt to your own task model through configurable field mappings.

Examples

Data Model

Gantt<TItem> binds to your own model type through field mapping parameters such as IdField, StartField, and EndField. You can keep your existing model names and map them without creating a dedicated DTO.

Must-Have Fields

For most production scenarios, these are the fields you should map:

  • StartField and EndField: Required to render timeline bars. If either value is missing/unassigned, the item cannot be drawn on the timeline.
  • TitleField: Recommended for readable tree rows and task labels.
  • IdField: Strongly recommended for stable identity, selection/state behavior, and CRUD operations.
  • DurationField (optional): Used for duration column/editing. If not mapped, duration is calculated from StartField and EndField.
  • ProgressField (optional): Enables progress percentage in bars, columns, and the edit dialog slider.

Data Structures

Gantt supports both data shapes:

  • Flat data: One collection with IdField and ParentIdField. This is usually best for API-driven data.
  • Hierarchical data: Nested child collections mapped through ItemsField.
  • If both ParentIdField and ItemsField exist, Gantt uses flat mode by default. Set HierarchicalData="true" to force hierarchical mode.
  • If ItemsField exists and ParentIdField does not, hierarchical mode is used automatically.

Flat Data Binding

Use the classic Id + ParentId model when your API already returns a flat task list.
Nov 02 - Nov 08, 2026
Task
Start
Website redesign
Nov 01, 2026
Discovery
Nov 01, 2026
Implementation
Nov 05, 2026
Components
Nov 06, 2026
Accessibility pass
Nov 11, 2026
Launch
Nov 15, 2026
Mon 02
Tue 03
Wed 04
Thu 05
Fri 06
Sat 07
Sun 08
Website redesign
Discovery
Implementation
Components
<Gantt TItem="TaskItem"
       Data="@tasks"
       Date="@selectedDate"
       SelectedView="GanttView.Week"
       DurationField="Duration">
    <GanttColumns>
        <GanttColumn Field="Title" Title="Task" Expandable Width="Width.Px(220)" />
        <GanttColumn Field="Start" Width="Width.Px(130)" />
        <GanttColumn Field="End" Width="Width.Px(130)" Visible="false" />
        <GanttColumn Field="Duration" Width="Width.Px(90)" TextAlignment="TextAlignment.Center" Visible="false" />
    </GanttColumns>
    <GanttToolbar />
    <GanttViews>
        <GanttWeekView TimelineCellWidth="90" RowHeight="44" />
    </GanttViews>
</Gantt>

@code {
    private DateOnly selectedDate = DateOnly.FromDateTime( DateTime.Today );

    private List<TaskItem> tasks = CreateTasks();

    private static List<TaskItem> CreateTasks()
    {
        var baseDate = DateTime.Today.AddDays( -2 );

        var result = new List<TaskItem>
        {
            new() { Id = "1", Title = "Website redesign", Start = baseDate, End = baseDate.AddDays( 16 ) },
            new() { Id = "2", ParentId = "1", Title = "Discovery", Start = baseDate, End = baseDate.AddDays( 4 ) },
            new() { Id = "3", ParentId = "1", Title = "Implementation", Start = baseDate.AddDays( 4 ), End = baseDate.AddDays( 14 ) },
            new() { Id = "4", ParentId = "3", Title = "Components", Start = baseDate.AddDays( 5 ), End = baseDate.AddDays( 10 ) },
            new() { Id = "5", ParentId = "3", Title = "Accessibility pass", Start = baseDate.AddDays( 10 ), End = baseDate.AddDays( 13 ) },
            new() { Id = "6", ParentId = "1", Title = "Launch", Start = baseDate.AddDays( 14 ), End = baseDate.AddDays( 16 ) },
        };

        foreach ( var item in result )
        {
            item.Duration = Math.Max( 1, (int)Math.Ceiling( ( item.End - item.Start ).TotalDays ) );
        }

        return result;
    }

    public class TaskItem
    {
        public string Id { get; set; }

        public string ParentId { get; set; }

        public string Title { get; set; }

        public DateTime Start { get; set; }

        public DateTime End { get; set; }

        public int Duration { get; set; }
    }
}

Hierarchical Data Binding

Bind directly to nested task collections with ItemsField for tree-shaped data models.
Nov 02 - Nov 08, 2026
WBS
Task
Start
1
Mobile app release
Nov 01, 2026
1.1
Planning
Nov 01, 2026
1.2
Execution
Nov 05, 2026
1.2.1
API integration
Nov 06, 2026
1.2.2
QA
Nov 12, 2026
1.3
Go-live
Nov 17, 2026
Mon 02
Tue 03
Wed 04
Thu 05
Fri 06
Sat 07
Sun 08
Mobile app release
Planning
Execution
API integration
<Gantt TItem="TaskItem"
       Data="@tasks"
       Date="@selectedDate"
       SelectedView="GanttView.Week"
       ItemsField="Children"
       HierarchicalData
       DurationField="Duration">
    <GanttColumns>
        <GanttColumn Field="Wbs" Width="Width.Px(76)" TextAlignment="TextAlignment.Center" Visible="false" />
        <GanttColumn Field="Title" Title="Task" Expandable Width="Width.Px(220)" />
        <GanttColumn Field="Start" Width="Width.Px(130)" />
        <GanttColumn Field="End" Width="Width.Px(130)" Visible="false" />
        <GanttColumn Field="Duration" Width="Width.Px(90)" TextAlignment="TextAlignment.Center" Visible="false" />
    </GanttColumns>
    <GanttToolbar />
    <GanttViews>
        <GanttWeekView TimelineCellWidth="90" RowHeight="44" />
    </GanttViews>
</Gantt>

@code {
    private DateOnly selectedDate = DateOnly.FromDateTime( DateTime.Today );

    private List<TaskItem> tasks = CreateTasks();

    private static List<TaskItem> CreateTasks()
    {
        var baseDate = DateTime.Today.AddDays( -2 );

        var result = new List<TaskItem>
        {
            new()
            {
                Id = "1",
                Title = "Mobile app release",
                Start = baseDate,
                End = baseDate.AddDays( 18 ),
                Children = new()
                {
                    new()
                    {
                        Id = "2",
                        Title = "Planning",
                        Start = baseDate,
                        End = baseDate.AddDays( 4 ),
                    },
                    new()
                    {
                        Id = "3",
                        Title = "Execution",
                        Start = baseDate.AddDays( 4 ),
                        End = baseDate.AddDays( 16 ),
                        Children = new()
                        {
                            new()
                            {
                                Id = "4",
                                Title = "API integration",
                                Start = baseDate.AddDays( 5 ),
                                End = baseDate.AddDays( 11 ),
                            },
                            new()
                            {
                                Id = "5",
                                Title = "QA",
                                Start = baseDate.AddDays( 11 ),
                                End = baseDate.AddDays( 16 ),
                            },
                        },
                    },
                    new()
                    {
                        Id = "6",
                        Title = "Go-live",
                        Start = baseDate.AddDays( 16 ),
                        End = baseDate.AddDays( 18 ),
                    },
                },
            },
        };

        UpdateDuration( result );

        return result;
    }

    private static void UpdateDuration( IEnumerable<TaskItem> items )
    {
        foreach ( var item in items )
        {
            item.Duration = Math.Max( 1, (int)Math.Ceiling( ( item.End - item.Start ).TotalDays ) );
            UpdateDuration( item.Children );
        }
    }

    public class TaskItem
    {
        public string Id { get; set; }

        public string Title { get; set; }

        public DateTime Start { get; set; }

        public DateTime End { get; set; }

        public int Duration { get; set; }

        public List<TaskItem> Children { get; set; } = new();
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page