Blazorise Gantt component

Build timeline-driven planning experiences with a synchronized tree and timeline view.

The Gantt component is designed for project planning use cases where tasks have hierarchy, dates, duration, and progress. It supports declarative columns, built-in editing, keyboard and mouse interactions, and template-based customization.

To use the Gantt component, install the Blazorise.Gantt package first.

Installation

NuGet

Install extension from NuGet.

Install-Package Blazorise.Gantt

Imports

In your main _Imports.razor add:

@using Blazorise.Gantt

Fundamentals

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.

Flat vs Hierarchical Data

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.

Columns

Use GanttColumns and declarative column components to control field mapping, order, visibility, sorting, alignment, and templates. This keeps tree rendering explicit and easy to evolve as requirements grow.

Editing and Commands

Set Editable to enable built-in create, add-child, edit, and delete flows. Use command switches and CommandAllowed for role-based or item-based command rules.

Set UseInternalEditing="false" when you want Gantt to keep its command affordances but let your page own the modal and persistence flow through NewItemClicked, AddChildItemClicked, EditItemClicked, and DeleteItemClicked.

Examples

Flat Data Binding

Use the classic Id + ParentId model when your API already returns a flat task list.

Some columns are hidden by default so the timeline has more space; use the Column Picker in the toolbar to show them.

Task

Start

Website redesign

Mar 11, 2026

Discovery

Mar 11, 2026

Implementation

Mar 15, 2026

Components

Mar 16, 2026

Accessibility pass

Mar 21, 2026

Launch

Mar 25, 2026

Mon 09

Tue 10

Wed 11

Thu 12

Fri 13

Sat 14

Sun 15

Website redesign

Discovery

Implementation

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

WBS

Task

Start

Mobile app release

Mar 11, 2026

1.1

Planning

Mar 11, 2026

1.2

Execution

Mar 15, 2026

1.2.1

API integration

Mar 16, 2026

1.2.2

Mar 22, 2026

1.3

Go-live

Mar 27, 2026

Mon 09

Tue 10

Wed 11

Thu 12

Fri 13

Sat 14

Sun 15

Mobile app release

Planning

Execution

<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();
    }
}

Built-in Editing

Enable Editable to use built-in create, add-child, update, and delete workflows. This example also demonstrates command-level control through CommandAllowed.

Task

Start

Marketing campaign

Mar 11, 2026

Research

Mar 11, 2026

Creative

Mar 15, 2026

Distribution

Mar 20, 2026

Mon 09

Tue 10

Wed 11

Thu 12

Fri 13

Sat 14

Sun 15

Marketing campaign45%

Research100%

Creative70%

<Gantt TItem="TaskItem"
       Data="@tasks"
       Date="@selectedDate"
       SelectedView="GanttView.Week"
       DurationField="Duration"
       Editable
       CommandAllowed="@AllowCommand">
    <GanttColumns>
        <GanttColumn Field="Title" Title="Task" Expandable Width="Width.Px(230)" />
        <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" />
        <GanttColumn Field="Progress" Width="Width.Px(96)" TextAlignment="TextAlignment.Center" Visible="false" />
        <GanttCommandColumn Width="Width.Px(60)" />
    </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 = "Marketing campaign", Start = baseDate, End = baseDate.AddDays( 15 ), Progress = 45d },
            new() { Id = "2", ParentId = "1", Title = "Research", Start = baseDate, End = baseDate.AddDays( 4 ), Progress = 100d },
            new() { Id = "3", ParentId = "1", Title = "Creative", Start = baseDate.AddDays( 4 ), End = baseDate.AddDays( 9 ), Progress = 70d },
            new() { Id = "4", ParentId = "1", Title = "Distribution", Start = baseDate.AddDays( 9 ), End = baseDate.AddDays( 15 ), Progress = 20d },
        };

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

        return result;
    }

    private bool AllowCommand( GanttCommandContext<TaskItem> context )
    {
        if ( context.CommandType == GanttCommandType.Delete && context.Item?.ParentId is null )
            return false;

        return true;
    }

    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; }

        public double Progress { get; set; }
    }
}

External Editing

By setting the UseInternalEditing=false Gantt raises command callbacks with the relevant item and context, but leaves the editing UI and persistence flow to your implementation. This is ideal for keeping Gantt as a pure view component while owning the user experience and data flow of your app.

Task

Start

Website redesign

Mar 11, 2026

Discovery

Mar 11, 2026

Implementation

Mar 15, 2026

Launch

Mar 23, 2026

Mon 09

Tue 10

Wed 11

Thu 12

Fri 13

Sat 14

Sun 15

Website redesign

Discovery

Implementation

Last external action: None

<Gantt TItem="TaskItem"
       Data="@tasks"
       Date="@selectedDate"
       SelectedView="GanttView.Week"
       DurationField="Duration"
       Editable
       UseInternalEditing="false"
       NewItemClicked="@OnNewItemClicked"
       AddChildItemClicked="@OnAddChildItemClicked"
       EditItemClicked="@OnEditItemClicked"
       DeleteItemClicked="@OnDeleteItemClicked">
    <GanttColumns>
        <GanttColumn Field="Title" Title="Task" Expandable Width="Width.Px( 230 )" />
        <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" />
        <GanttCommandColumn Width="Width.Px( 176 )">
            <HeaderTemplate>
                @if ( context.CanAddTask )
                {
                    <Button Size="Size.ExtraSmall" Color="Color.Success" Outline Clicked="@context.AddTask">New</Button>
                }
            </HeaderTemplate>
            <DisplayTemplate>
                @if ( context.CanAddChild )
                {
                    <Button Size="Size.ExtraSmall" Color="Color.Secondary" Outline Margin="Margin.Is1.FromEnd" Clicked="@context.AddChild">Child</Button>
                }
                @if ( context.CanEdit )
                {
                    <Button Size="Size.ExtraSmall" Color="Color.Primary" Outline Margin="Margin.Is1.FromEnd" Clicked="@context.Edit">Edit</Button>
                }
                @if ( context.CanDelete )
                {
                    <Button Size="Size.ExtraSmall" Color="Color.Danger" Outline Clicked="@context.Delete">Delete</Button>
                }
            </DisplayTemplate>
        </GanttCommandColumn>
    </GanttColumns>
    <GanttViews>
        <GanttWeekView TimelineCellWidth="90" RowHeight="44" />
    </GanttViews>
</Gantt>

<Paragraph TextColor="TextColor.Muted" Margin="Margin.Is3.FromTop">
    Last external action: @lastAction
</Paragraph>

<Modal @bind-Visible="@editorVisible" Centered>
    <ModalContent>
        <ModalHeader>
            <ModalTitle>@editorModeTitle</ModalTitle>
            <CloseButton Clicked="@CloseEditor" />
        </ModalHeader>
        <ModalBody>
            <Paragraph TextColor="TextColor.Muted">
                This modal is owned by the page. Gantt only raises the command callbacks.
            </Paragraph>
            <Field>
                <FieldLabel>Title</FieldLabel>
                <FieldBody>
                    <TextInput @bind-Value="@editorTitle" Placeholder="Task title" />
                </FieldBody>
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@CloseEditor">Cancel</Button>
            <Button Color="Color.Primary" Clicked="@SaveEditor">Save</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

@code {
    private DateOnly selectedDate = DateOnly.FromDateTime( DateTime.Today );
    private List<TaskItem> tasks = CreateTasks();
    private bool editorVisible;
    private string editorModeTitle = "Edit task";
    private string editorTitle;
    private string editorParentId;
    private string editorTargetId;
    private TaskItem editorDraft;
    private string lastAction = "None";
    private int nextId = 100;

    private Task OnNewItemClicked( GanttCommandContext<TaskItem> context )
        => OpenEditor( context.Item, null, null, "Create task" );

    private Task OnAddChildItemClicked( GanttCommandContext<TaskItem> context )
        => OpenEditor( context.Item, context.ParentItem, null, $"Create child for {context.ParentItem?.Title}" );

    private Task OnEditItemClicked( GanttItemClickedEventArgs<TaskItem> context )
        => OpenEditor( context.Item, null, context.Item?.Id, $"Edit {context.Item?.Title}" );

    private Task OnDeleteItemClicked( GanttItemClickedEventArgs<TaskItem> context )
    {
        if ( context?.Item?.Id is null )
            return Task.CompletedTask;

        RemoveTaskWithChildren( tasks, context.Item.Id );
        lastAction = $"Deleted {context.Item.Title}";

        return Task.CompletedTask;
    }

    private Task OpenEditor( TaskItem item, TaskItem parentItem, string targetId, string modeTitle )
    {
        editorDraft = item?.Clone() ?? new TaskItem();
        editorParentId = parentItem?.Id;
        editorTargetId = targetId;
        editorTitle = editorDraft.Title ?? string.Empty;
        editorModeTitle = modeTitle;
        editorVisible = true;

        return Task.CompletedTask;
    }

    private Task CloseEditor()
    {
        editorVisible = false;
        editorDraft = null;
        editorParentId = null;
        editorTargetId = null;
        editorTitle = string.Empty;

        return Task.CompletedTask;
    }

    private Task SaveEditor()
    {
        if ( editorDraft is null )
            return Task.CompletedTask;

        editorDraft.Title = string.IsNullOrWhiteSpace( editorTitle )
            ? "Untitled task"
            : editorTitle.Trim();

        if ( string.IsNullOrEmpty( editorTargetId ) )
        {
            editorDraft.Id ??= $"task-{nextId++}";
            editorDraft.ParentId = editorParentId;
            tasks.Add( editorDraft.Clone() );
            lastAction = editorParentId is null
                ? $"Created {editorDraft.Title}"
                : $"Created child {editorDraft.Title}";
        }
        else
        {
            var existingTask = tasks.FirstOrDefault( x => x.Id == editorTargetId );

            if ( existingTask is not null )
            {
                existingTask.Title = editorDraft.Title;
                lastAction = $"Updated {existingTask.Title}";
            }
        }

        return CloseEditor();
    }

    private static void RemoveTaskWithChildren( List<TaskItem> list, string itemId )
    {
        var idsToDelete = new HashSet<string>( StringComparer.Ordinal ) { itemId };
        var changed = true;

        while ( changed )
        {
            changed = false;

            foreach ( var task in list )
            {
                if ( task.ParentId is not null && idsToDelete.Contains( task.ParentId ) && idsToDelete.Add( task.Id ) )
                    changed = true;
            }
        }

        list.RemoveAll( x => idsToDelete.Contains( x.Id ) );
    }

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

        return new List<TaskItem>
        {
            new() { Id = "1", Title = "Website redesign", Start = baseDate, End = baseDate.AddDays( 14 ), Duration = 14 },
            new() { Id = "2", ParentId = "1", Title = "Discovery", Start = baseDate, End = baseDate.AddDays( 4 ), Duration = 4 },
            new() { Id = "3", ParentId = "1", Title = "Implementation", Start = baseDate.AddDays( 4 ), End = baseDate.AddDays( 12 ), Duration = 8 },
            new() { Id = "4", ParentId = "1", Title = "Launch", Start = baseDate.AddDays( 12 ), End = baseDate.AddDays( 14 ), Duration = 2 },
        };
    }

    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; }

        public TaskItem Clone()
        {
            return new TaskItem
            {
                Id = Id,
                ParentId = ParentId,
                Title = Title,
                Start = Start,
                End = End,
                Duration = Duration,
            };
        }
    }
}

Multiple Views

Configure all timeline views in one Gantt instance, customize leading and trailing slots per view, and override week start day when needed.

Task

Start

Project launch

Mar 11, 2026

Planning

Mar 11, 2026

Execution

Mar 15, 2026

Backend

Mar 16, 2026

Frontend

Mar 19, 2026

Go-live

Mar 27, 2026

Fri 06

Sat 07

Sun 08

Mon 09

Tue 10

Wed 11

Thu 12

Fri 13

Sat 14

Sun 15

Mon 16

Tue 17

Wed 18

Project launch

Planning

Execution

Backend

Current date: 3/13/2026 | View: Week

<Gantt TItem="TaskItem"
       Data="@tasks"
       @bind-Date="@selectedDate"
       @bind-SelectedView="@selectedView"
       FirstDayOfWeek="DayOfWeek.Sunday"
       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>
        <GanttDayView TimelineCellWidth="56" RowHeight="44" LeadingSlots="2" TrailingSlots="2" />
        <GanttWeekView TimelineCellWidth="92" RowHeight="44" LeadingSlots="3" TrailingSlots="3" FirstDayOfWeek="DayOfWeek.Monday" />
        <GanttMonthView TimelineCellWidth="38" RowHeight="44" LeadingSlots="5" TrailingSlots="5" />
        <GanttYearView TimelineCellWidth="80" RowHeight="44" LeadingSlots="1" TrailingSlots="1" />
    </GanttViews>
</Gantt>

<Paragraph TextColor="TextColor.Muted" Margin="Margin.Is2.FromTop">
    Current date: @selectedDate | View: @selectedView
</Paragraph>

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

    private GanttView selectedView = GanttView.Week;

    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 = "Project launch", Start = baseDate, End = baseDate.AddDays( 18 ) },
            new() { Id = "2", ParentId = "1", Title = "Planning", Start = baseDate, End = baseDate.AddDays( 4 ) },
            new() { Id = "3", ParentId = "1", Title = "Execution", Start = baseDate.AddDays( 4 ), End = baseDate.AddDays( 16 ) },
            new() { Id = "4", ParentId = "3", Title = "Backend", Start = baseDate.AddDays( 5 ), End = baseDate.AddDays( 11 ) },
            new() { Id = "5", ParentId = "3", Title = "Frontend", Start = baseDate.AddDays( 8 ), End = baseDate.AddDays( 15 ) },
            new() { Id = "6", ParentId = "1", Title = "Go-live", Start = baseDate.AddDays( 16 ), End = baseDate.AddDays( 18 ) },
        };

        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; }
    }
}

Template Customization

Customize multiple Gantt surfaces with templates, including header cells, tree cells, command cells, timeline headers, and task bars.

Task

Duration

Platform update

13d

Core services

Web client

Release prep

Mon 09

Tue 10

Wed 11

Thu 12

Fri 13

Sat 14

Sun 15

Platform update

Core services

Web client

<Gantt TItem="TaskItem"
       Data="@tasks"
       Date="@selectedDate"
       SelectedView="GanttView.Week"
       DurationField="Duration"
       Editable>
    <ChildContent>
        <GanttColumns>
            <GanttColumn Field="Title" Title="Task" Expandable Width="Width.Px(230)">
                <HeaderTemplate>
                    <Icon Name="IconName.List" Margin="Margin.Is1.FromEnd" />
                    <Span>@context.Text</Span>
                </HeaderTemplate>
            </GanttColumn>
            <GanttColumn Field="Duration" Width="Width.Px(90)" TextAlignment="TextAlignment.Center">
                <DisplayTemplate>
                    <Badge Color="Color.Info" Pill>@($"{context.Value}d")</Badge>
                </DisplayTemplate>
            </GanttColumn>
            <GanttCommandColumn Width="Width.Px(176)">
                <DisplayTemplate>
                    @if ( context.CanAddChild )
                    {
                        <Button Size="Size.ExtraSmall" Color="Color.Secondary" Outline Margin="Margin.Is1.FromEnd" Clicked="@context.AddChild">Child</Button>
                    }
                    @if ( context.CanEdit )
                    {
                        <Button Size="Size.ExtraSmall" Color="Color.Primary" Outline Margin="Margin.Is1.FromEnd" Clicked="@context.Edit">Edit</Button>
                    }
                    @if ( context.CanDelete )
                    {
                        <Button Size="Size.ExtraSmall" Color="Color.Danger" Outline Clicked="@context.Delete">Delete</Button>
                    }
                </DisplayTemplate>
            </GanttCommandColumn>
        </GanttColumns>

        <GanttToolbar />

        <GanttViews>
            <GanttWeekView TimelineCellWidth="92" RowHeight="44" />
        </GanttViews>
    </ChildContent>

    <TimelineHeaderCellTemplate>
        <Span TextSize="TextSize.Small" TextWeight="TextWeight.SemiBold">
            @context.Start.ToString( "ddd dd" )
        </Span>
    </TimelineHeaderCellTemplate>

    <TaskItemTemplate>
        <Span TextWeight="TextWeight.SemiBold">@context.Item.Title</Span>
    </TaskItemTemplate>
</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 = "Platform update", Start = baseDate, End = baseDate.AddDays( 13 ) },
            new() { Id = "2", ParentId = "1", Title = "Core services", Start = baseDate, End = baseDate.AddDays( 7 ) },
            new() { Id = "3", ParentId = "1", Title = "Web client", Start = baseDate.AddDays( 4 ), End = baseDate.AddDays( 11 ) },
            new() { Id = "4", ParentId = "1", Title = "Release prep", Start = baseDate.AddDays( 11 ), End = baseDate.AddDays( 13 ) },
        };

        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; }
    }
}

API

Parameters

Gantt

Parameter	Description	Type	Default
`ActionColumnWidth`	Gets or sets action column width in pixels.	`double`	`42d`
`AddChildCommandAllowed`	Gets or sets whether creating child items is allowed.	`bool`	`true`
`ChildContent`	Gets or sets child content used to declare toolbar and views.	`RenderFragment`	`null`
`Data`	Gets or sets data source displayed by the Gantt.	`IEnumerable<TItem>`	`null`
`Date`	Gets or sets current anchor date used by selected view.	`DateOnly`	`DateOnly.FromDateTime( DateTime.Today )`
`DateColumnWidth`	Gets or sets fallback date column width in pixels used when an auto-sized value cannot be calculated.	`double`	`140d`
`DeleteCommandAllowed`	Gets or sets whether deleting existing items is allowed.	`bool`	`true`
`DescriptionField`	Gets or sets description field name.	`string`	`"Description"`
`DurationField`	Gets or sets duration (days) field name.	`string`	`"Duration"`
`Editable`	Gets or sets whether item editing is enabled.	`bool`	`false`
`EditCommandAllowed`	Gets or sets whether editing existing items is allowed.	`bool`	`true`
`EndField`	Gets or sets end date field name.	`string`	`"End"`
`FirstDayOfWeek`	Gets or sets first day of week used by weekly calculations.	`DayOfWeek`	`DayOfWeek.Monday`
`HeaderRowHeight`	Gets or sets header row height in pixels.	`double`	`DefaultHeaderRowHeight`
`HierarchicalData`	Gets or sets whether hierarchical data mode is forced when both parent-id and items mapping exist.	`bool`	`false`
`IdField`	Gets or sets item identifier field name.	`string`	`"Id"`
`ItemsField`	Gets or sets child item collection field name.	`string`	`"Items"`
`KeyboardNavigation`	Gets or sets whether basic keyboard navigation is enabled for tree rows.	`bool`	`true`
`Localizers`	Gets or sets custom localizers for Gantt texts.	`GanttLocalizers`	`null`
`MinBarWidth`	Gets or sets minimum item bar width in pixels.	`double`	`14d`
`NewCommandAllowed`	Gets or sets whether creating new top-level items is allowed.	`bool`	`true`
`ParentIdField`	Gets or sets parent identifier field name.	`string`	`"ParentId"`
`ProgressField`	Gets or sets progress field name.	`string`	`"Progress"`
`SearchInputWidth`	Gets or sets search input width in pixels.	`double`	`DefaultSearchInputWidth`
`SearchText`	Gets or sets search text used to filter tree rows.	`string`
`SelectedRow`	Gets or sets currently selected tree row item.	`TItem`	`null`
`SelectedView`	Gets or sets currently selected view mode. Possible values:`Day`, `Week`, `Month`, `Year`	`GanttView`	`GanttView.Week`
`ShowToggleAllCommands`	Gets or sets whether toggle-all commands (expand/collapse all) are visible in the toolbar.	`bool`	`true`
`ShowToolbar`	Gets or sets whether toolbar is rendered.	`bool`	`true`
`Sortable`	Gets or sets whether tree column sorting is enabled.	`bool`	`true`
`StartField`	Gets or sets start date field name.	`string`	`"Start"`
`TaskItemTemplate`	Gets or sets template used to render timeline task content.	`RenderFragment<GanttItemContext<TItem>>`	`null`
`TimelineHeaderCellTemplate`	Gets or sets template used to render timeline header cells.	`RenderFragment<GanttTimelineHeaderCellContext>`	`null`
`TitleColumnWidth`	Gets or sets title column width in pixels.	`double`	`320d`
`TitleField`	Gets or sets title field name.	`string`	`"Title"`
`TreeCommandCellTemplate`	Gets or sets template used to render command cell content.	`RenderFragment<GanttTreeCommandCellContext<TItem>>`	`null`
`TreeCommandHeaderTemplate`	Gets or sets template used to render command header content.	`RenderFragment<GanttTreeCommandHeaderContext<TItem>>`	`null`
`TreeIndentSize`	Gets or sets tree indentation size per level in pixels.	`double`	`18d`
`TreeToggleWidth`	Gets or sets tree toggle placeholder width in pixels.	`double`	`DefaultTreeToggleWidth`
`UseInternalEditing`	Gets or sets whether built-in modal editing and internal data mutation are used.	`bool`	`true`

GanttColumn

Parameter	Description	Type	Default
`CellsEditableOnEditCommand`	Gets or sets whether this column is editable during edit-item command.	`bool`	`true`
`CellsEditableOnNewCommand`	Gets or sets whether this column is editable during new-item command.	`bool`	`true`
`Displayable`	Gets or sets whether column can be shown in column picker.	`bool`	`true`
`DisplayFormat`	Gets or sets display format for default display text.	`string`
`DisplayFormatProvider`	Gets or sets display format provider.	`IFormatProvider`	`null`
`DisplayTemplate`	Gets or sets custom display template.	`RenderFragment<GanttColumnDisplayContext<TItem>>`	`null`
`Editable`	Gets or sets whether this column is editable in edit forms.	`bool`	`true`
`EditTemplate`	Gets or sets custom edit template.	`RenderFragment<GanttColumnEditContext<TItem>>`	`null`
`Expandable`	Gets or sets whether this column should render tree expander.	`bool`	`false`
`Field`	Field name bound to this column.	`string`
`HeaderTemplate`	Gets or sets custom header template.	`RenderFragment<GanttColumnHeaderContext<TItem>>`	`null`
`Sortable`	Gets or sets whether this column can be sorted.	`bool`	`true`
`SortField`	Gets or sets field used by sort operation. Defaults to Field.	`string`
`TextAlignment`	Gets or sets text alignment for header and cell. Possible values:`Default`, `Start`, `End`, `Center`, `Justified`	`TextAlignment`	`Default`
`Title`	Optional title shown in header.	`string`
`Visible`	Gets or sets whether column is currently visible.	`bool`	`true`
`Width`	Gets or sets width.	`IFluentSizing`	`null`

GanttCommandColumn

Parameter	Description	Type	Default
`Displayable`	Gets or sets whether column can be shown in column picker.	`bool`	`true`
`DisplayFormat`	Gets or sets display format for default display text.	`string`
`DisplayFormatProvider`	Gets or sets display format provider.	`IFormatProvider`	`null`
`DisplayTemplate`	Gets or sets custom command display template.	`RenderFragment<GanttCommandColumnDisplayContext<TItem>>`	`null`
`EditTemplate`	Gets or sets custom edit template.	`RenderFragment<GanttColumnEditContext<TItem>>`	`null`
`Expandable`	Gets or sets whether this column should render tree expander.	`bool`	`false`
`Field`	Field name bound to this column.	`string`
`HeaderTemplate`	Gets or sets custom header template.	`RenderFragment<GanttColumnHeaderContext<TItem>>`	`null`
`Sortable`	Gets or sets whether this column can be sorted.	`bool`	`true`
`SortField`	Gets or sets field used by sort operation. Defaults to Field.	`string`
`TextAlignment`	Gets or sets text alignment for header and cell. Possible values:`Default`, `Start`, `End`, `Center`, `Justified`	`TextAlignment`	`Default`
`Title`	Optional title shown in header.	`string`
`Visible`	Gets or sets whether column is currently visible.	`bool`	`true`
`Width`	Gets or sets width.	`IFluentSizing`	`null`

GanttDayView

Parameter	Description	Type	Default
`ItemTemplate`	Template for rendering the timeline item bar.	`RenderFragment<GanttItemContext<TItem>>`	`null`
`LeadingSlots`	Number of extra slots shown before the anchor period.	`int`	`0`
`RowHeight`	Height of each timeline row in pixels.	`double`	`44`
`RowTemplate`	Template for rendering the row cell.	`RenderFragment<GanttRowContext<TItem>>`	`null`
`TimelineCellWidth`	Width of each timeline cell in pixels.	`double`	`72`
`TrailingSlots`	Number of extra slots shown after the anchor period.	`int`	`0`

GanttWeekView

Parameter	Description	Type	Default
`FirstDayOfWeek`	Optional first day of week override for week view calculations.	`DayOfWeek?`	`null`
`ItemTemplate`	Template for rendering the timeline item bar.	`RenderFragment<GanttItemContext<TItem>>`	`null`
`LeadingSlots`	Number of extra slots shown before the anchor period.	`int`	`0`
`RowHeight`	Height of each timeline row in pixels.	`double`	`44`
`RowTemplate`	Template for rendering the row cell.	`RenderFragment<GanttRowContext<TItem>>`	`null`
`TimelineCellWidth`	Width of each timeline cell in pixels.	`double`	`72`
`TrailingSlots`	Number of extra slots shown after the anchor period.	`int`	`0`

GanttMonthView

Parameter	Description	Type	Default
`ItemTemplate`	Template for rendering the timeline item bar.	`RenderFragment<GanttItemContext<TItem>>`	`null`
`LeadingSlots`	Number of extra slots shown before the anchor period.	`int`	`0`
`RowHeight`	Height of each timeline row in pixels.	`double`	`44`
`RowTemplate`	Template for rendering the row cell.	`RenderFragment<GanttRowContext<TItem>>`	`null`
`TimelineCellWidth`	Width of each timeline cell in pixels.	`double`	`72`
`TrailingSlots`	Number of extra slots shown after the anchor period.	`int`	`0`

GanttYearView

Parameter	Description	Type	Default
`ItemTemplate`	Template for rendering the timeline item bar.	`RenderFragment<GanttItemContext<TItem>>`	`null`
`LeadingSlots`	Number of extra slots shown before the anchor period.	`int`	`0`
`RowHeight`	Height of each timeline row in pixels.	`double`	`44`
`RowTemplate`	Template for rendering the row cell.	`RenderFragment<GanttRowContext<TItem>>`	`null`
`TimelineCellWidth`	Width of each timeline cell in pixels.	`double`	`72`
`TrailingSlots`	Number of extra slots shown after the anchor period.	`int`	`0`

Events

Gantt

Event	Description	Type
`AddChildItemClicked`	Gets or sets callback invoked when the add-child command is triggered.	`EventCallback<GanttCommandContext<TItem>>`
`CommandAllowed`	Gets or sets callback used to allow or deny command execution per item.	`Func<GanttCommandContext<TItem>, bool>`
`DateChanged`	Gets or sets callback raised when Date changes.	`EventCallback<DateOnly>`
`DeleteItemClicked`	Gets or sets callback invoked when delete action is triggered for item.	`EventCallback<GanttItemClickedEventArgs<TItem>>`
`EditItemClicked`	Gets or sets callback invoked when edit action is triggered for item.	`EventCallback<GanttItemClickedEventArgs<TItem>>`
`ItemClicked`	Gets or sets callback invoked when a timeline item is clicked.	`EventCallback<GanttItemClickedEventArgs<TItem>>`
`ItemInserted`	Gets or sets callback invoked after item insertion.	`EventCallback<GanttInsertedItem<TItem>>`
`ItemInserting`	Gets or sets callback invoked before an item is inserted.	`EventCallback<GanttCancellableItemChange<TItem>>`
`ItemRemoved`	Gets or sets callback invoked after item removal.	`EventCallback<GanttUpdatedItem<TItem>>`
`ItemRemoving`	Gets or sets callback invoked before an item is removed.	`EventCallback<GanttCancellableItemChange<TItem>>`
`ItemStyling`	Gets or sets item styling callback for timeline bars.	`Action<TItem, GanttItemStyling>`
`ItemUpdated`	Gets or sets callback invoked after item update.	`EventCallback<GanttUpdatedItem<TItem>>`
`ItemUpdating`	Gets or sets callback invoked before an item is updated.	`EventCallback<GanttCancellableItemChange<TItem>>`
`NewIdCreator`	Gets or sets custom factory used to create new item identifiers.	`Func<object>`
`NewItemClicked`	Gets or sets callback invoked when the new-item command is triggered.	`EventCallback<GanttCommandContext<TItem>>`
`NewItemCreator`	Gets or sets custom factory used to create new item instances.	`Func<TItem>`
`ReadData`	Gets or sets callback used for API-style data reads.	`EventCallback<GanttReadDataEventArgs<TItem>>`
`SearchTextChanged`	Gets or sets callback raised when SearchText changes.	`EventCallback<string>`
`SelectedRowChanged`	Gets or sets callback raised when SelectedRow changes.	`EventCallback<TItem>`
`SelectedViewChanged`	Gets or sets callback raised when SelectedView changes.	`EventCallback<GanttView>`

Methods

Gantt

Method	Description	Return	Parameters
`AddChild`	Creates a new child item for specified parent.	`Task`	`TItem parentItem`
`CollapseAll`	Collapses all nodes in the tree, including all nested child nodes.	`Task`
`Delete`	Deletes specified item.	`Task`	`TItem item`
`Edit`	Puts chart in edit-item state for specified item.	`Task`	`TItem item`
`ExpandAll`	Expands all nodes in the tree, including all nested child nodes.	`Task`
`GetState`	Gets current Gantt state.	`Task<GanttState<TItem>>`
`LoadState`	Loads and applies Gantt state.	`Task`	`GanttState<TItem> ganttState`
`NavigateNextPeriod`	Navigates to the next period based on the selected view.	`Task`
`NavigatePreviousPeriod`	Navigates to the previous period based on the selected view.	`Task`
`NavigateToday`	Navigates the chart to current date.	`Task`
`New`	Creates a new item using configured new-item factory.	`Task`
`New`	Creates a new top-level item.	`Task`	`TItem item`
`New`	Puts chart in new-item editing state.	`Task`	`TItem item, TItem parentItem`
`NotifyBarDragMouseMove`	No documentation available - no XML comment Remarks No documentation available - no XML comment	`Task`	`double clientX`
`NotifyBarDragMouseUp`	No documentation available - no XML comment Remarks No documentation available - no XML comment	`Task`	`double clientX, bool dragged`
`ShowDayView`	Switches to Day view.	`Task`
`ShowMonthView`	Switches to Month view.	`Task`
`ShowWeekView`	Switches to Week view.	`Task`
`ShowYearView`	Switches to Year view.	`Task`

GanttColumn

Method	Description	Return	Parameters
`CellValueIsEditable`	Gets whether the column value is editable for current edit state.	`bool`	`GanttEditState editState`
`CanSort`	Returns true when column can be sorted.	`bool`
`FormatDisplayValue`	Gets formatted display text for this column.	`string`	`object value`
`GetSortField`	Gets field name to sort by.	`string`
`GetSortValue`	Gets raw value used for sorting.	`object`	`TItem item`
`GetValue`	Gets raw value for this column.	`object`	`TItem item`

GanttCommandColumn

Method	Description	Return	Parameters
`CanSort`	Returns true when column can be sorted.	`bool`
`FormatDisplayValue`	Gets formatted display text for this column.	`string`	`object value`
`GetSortField`	Gets field name to sort by.	`string`
`GetSortValue`	Gets raw value used for sorting.	`object`	`TItem item`
`GetValue`	Gets raw value for this column.	`object`	`TItem item`

Blazorise Gantt component

Installation

NuGet

Imports

Fundamentals

Data Model

Must-Have Fields

Flat vs Hierarchical Data

Columns

Editing and Commands

Examples

Flat Data Binding

Hierarchical Data Binding

Built-in Editing

External Editing

Multiple Views

Template Customization

API

Parameters

Gantt

GanttColumn

GanttCommandColumn

GanttDayView

GanttWeekView

GanttMonthView

GanttYearView

Events

Gantt

Methods

Gantt

GanttColumn

GanttCommandColumn

On this page