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.
Oct 26 - Nov 01, 2026
Task
Start
Website redesign
Oct 27, 2026
Discovery
Oct 27, 2026
Implementation
Oct 31, 2026
Components
Nov 01, 2026
Accessibility pass
Nov 06, 2026
Launch
Nov 10, 2026
Mon 26
Tue 27
Wed 28
Thu 29
Fri 30
Sat 31
Sun 01
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.
Oct 26 - Nov 01, 2026
WBS
Task
Start
1
Mobile app release
Oct 27, 2026
1.1
Planning
Oct 27, 2026
1.2
Execution
Oct 31, 2026
1.2.1
API integration
Nov 01, 2026
1.2.2
QA
Nov 07, 2026
1.3
Go-live
Nov 12, 2026
Mon 26
Tue 27
Wed 28
Thu 29
Fri 30
Sat 31
Sun 01
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