Added in v2.0

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.

Use the focused Gantt pages for data binding, columns and templates, editing, views, and timeline features.

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

Basic Usage

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

Aug 11, 2026

Discovery

Aug 11, 2026

Implementation

Aug 15, 2026

Components

Aug 16, 2026

Accessibility pass

Aug 21, 2026

Launch

Aug 25, 2026

Mon 10

Tue 11

Wed 12

Thu 13

Fri 14

Sat 15

Sun 16

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

API

Parameters

Gantt

Parameter	Description	Type	Default
`ActionColumnWidth`	Specifies action column width in pixels.	`double`	`42d`
`AddChildCommandAllowed`	Determines whether creating child items is allowed.	`bool`	`true`
`AutoExpandView`	Determines whether the active view range automatically expands to include all items.	`bool`	`false`
`ChildContent`	Defines child content used to declare toolbar and views.	`RenderFragment`	`null`
`Data`	Specifies the data source displayed by the Gantt chart.	`IEnumerable<TItem>`	`null`
`Date`	Specifies the anchor date used by the selected view.	`DateOnly`	`DateOnly.FromDateTime( DateTime.Today )`
`DateColumnWidth`	Specifies fallback date column width in pixels used when an auto-sized value cannot be calculated.	`double`	`140d`
`DeleteCommandAllowed`	Determines whether deleting existing items is allowed.	`bool`	`true`
`DescriptionField`	Specifies the data field used for item descriptions.	`string`	`"Description"`
`Draggable`	Determines whether timeline item bars can be dragged to move their start and end dates together.	`bool`	`true`
`DurationField`	Specifies the data field used for item duration, in days.	`string`	`"Duration"`
`Editable`	Determines whether item editing is enabled.	`bool`	`false`
`EditCommandAllowed`	Determines whether editing existing items is allowed.	`bool`	`true`
`EndField`	Specifies the data field used for item end dates.	`string`	`"End"`
`FirstDayOfWeek`	Specifies the first day of the week used for date calculations.	`DayOfWeek`	`DayOfWeek.Monday`
`HeaderRowHeight`	Specifies header row height in pixels.	`double`	`DefaultHeaderRowHeight`
`HierarchicalData`	Determines whether hierarchical data mode is forced when both parent-id and items mapping exist.	`bool`	`false`
`IdField`	Specifies the data field that contains each item's unique identifier.	`string`	`"Id"`
`IncludeMilestonesInAutoExpandView`	Determines whether AutoExpandView also includes milestone dates in the computed timeline range.	`bool`	`false`
`ItemsField`	Specifies the data field that contains child items for hierarchical data.	`string`	`"Items"`
`KeyboardNavigation`	Determines whether basic keyboard navigation is enabled for tree rows.	`bool`	`true`
`Localizers`	Provides custom localizers for Gantt UI text.	`GanttLocalizers`	`null`
`Milestones`	Specifies milestone markers displayed on the Gantt timeline.	`IEnumerable<GanttMilestone>`	`null`
`MilestoneTemplate`	Defines template used to render milestone labels.	`RenderFragment<GanttMilestoneContext>`	`null`
`MinBarWidth`	Specifies minimum item bar width in pixels.	`double`	`14d`
`NewCommandAllowed`	Determines whether creating new top-level items is allowed.	`bool`	`true`
`ParentIdField`	Specifies the data field that contains each item's parent identifier.	`string`	`"ParentId"`
`ProgressField`	Specifies the data field used for item progress values.	`string`	`"Progress"`
`Resizable`	Determines whether timeline item bars can be resized by dragging their start and end edges.	`bool`	`true`
`SearchInputWidth`	Specifies search input width in pixels.	`double`	`DefaultSearchInputWidth`
`SearchText`	Specifies the search text used to filter tree rows.	`string`
`SelectedRow`	Specifies the currently selected tree row item.	`TItem`	`null`
`SelectedView`	Specifies the active Gantt view. Possible values:`Day`, `Week`, `Month`, `Year`	`GanttView`	`GanttView.Week`
`ShowToggleAllCommands`	Determines whether toggle-all commands (expand/collapse all) are visible in the toolbar.	`bool`	`true`
`ShowToolbar`	Determines whether toolbar is rendered.	`bool`	`true`
`Sortable`	Determines whether tree column sorting is enabled.	`bool`	`true`
`StartField`	Specifies the data field used for item start dates.	`string`	`"Start"`
`TaskItemTemplate`	Defines template used to render timeline task content.	`RenderFragment<GanttItemContext<TItem>>`	`null`
`TimelineHeaderCellTemplate`	Defines template used to render timeline header cells.	`RenderFragment<GanttTimelineHeaderCellContext>`	`null`
`TitleColumnWidth`	Specifies title column width in pixels.	`double`	`320d`
`TitleField`	Specifies the data field used for item titles.	`string`	`"Title"`
`TreeCommandCellTemplate`	Defines template used to render command cell content.	`RenderFragment<GanttTreeCommandCellContext<TItem>>`	`null`
`TreeCommandHeaderTemplate`	Defines template used to render command header content.	`RenderFragment<GanttTreeCommandHeaderContext<TItem>>`	`null`
`TreeIndentSize`	Specifies tree indentation size per level in pixels.	`double`	`18d`
`TreeToggleWidth`	Specifies tree toggle placeholder width in pixels.	`double`	`DefaultTreeToggleWidth`
`UseInternalEditing`	Determines whether built-in modal editing and internal data mutation are used.	`bool`	`true`

GanttColumn

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

GanttCommandColumn

Parameter	Description	Type	Default
`Displayable`	Determines whether column can be shown in column picker.	`bool`	`true`
`DisplayFormat`	Specifies display format for default display text.	`string`
`DisplayFormatProvider`	Specifies display format provider.	`IFormatProvider`	`null`
`DisplayTemplate`	Defines custom command display template.	`RenderFragment<GanttCommandColumnDisplayContext<TItem>>`	`null`
`EditTemplate`	Defines custom edit template.	`RenderFragment<GanttColumnEditContext<TItem>>`	`null`
`Expandable`	Determines whether this column should render tree expander.	`bool`	`false`
`Field`	Field name bound to this column.	`string`
`HeaderTemplate`	Defines custom header template.	`RenderFragment<GanttColumnHeaderContext<TItem>>`	`null`
`Sortable`	Determines whether this column can be sorted.	`bool`	`true`
`SortField`	Specifies field used by sort operation. Defaults to Field.	`string`
`TextAlignment`	Specifies text alignment for header and cell. Possible values:`Default`, `Start`, `End`, `Center`, `Justified`	`TextAlignment`	`Default`
`Title`	Optional title shown in header.	`string`
`Visible`	Determines whether column is currently visible.	`bool`	`true`
`Width`	Specifies 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`	Specifies the first day of the week used for date 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
`FirstDayOfWeek`	Specifies the first day of the week used when TimelineScale is Week.	`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`
`TimelineScale`	Specifies the timeline scale used to render the year view columns. Possible values:`Month`, `Week`	`GanttYearViewTimelineScale`	`GanttYearViewTimelineScale.Month`
`TrailingSlots`	Number of extra slots shown after the anchor period.	`int`	`0`

Events

Gantt

Event	Description	Type
`AddChildItemClicked`	Notifies when the add-child command is triggered.	`EventCallback<GanttCommandContext<TItem>>`
`CommandAllowed`	Provides a callback that determines whether a command is allowed for a given item.	`Func<GanttCommandContext<TItem>, bool>`
`DateChanged`	Notifies when Date changes.	`EventCallback<DateOnly>`
`DeleteItemClicked`	Notifies when the delete action is triggered for an item.	`EventCallback<GanttItemClickedEventArgs<TItem>>`
`EditItemClicked`	Notifies when the edit action is triggered for an item.	`EventCallback<GanttItemClickedEventArgs<TItem>>`
`ItemClicked`	Notifies when a timeline item is clicked.	`EventCallback<GanttItemClickedEventArgs<TItem>>`
`ItemInserted`	Notifies after a new item is inserted.	`EventCallback<GanttInsertedItem<TItem>>`
`ItemInserting`	Notifies before a new item is inserted.	`EventCallback<GanttCancellableItemChange<TItem>>`
`ItemRemoved`	Notifies after an item is removed.	`EventCallback<GanttUpdatedItem<TItem>>`
`ItemRemoving`	Notifies before an item is removed.	`EventCallback<GanttCancellableItemChange<TItem>>`
`ItemStyling`	Defines styling applied to timeline bars for each item.	`Action<TItem, GanttItemStyling>`
`ItemUpdated`	Notifies after an item is updated.	`EventCallback<GanttUpdatedItem<TItem>>`
`ItemUpdating`	Notifies before an existing item is updated.	`EventCallback<GanttCancellableItemChange<TItem>>`
`MilestoneStyling`	Defines styling applied to timeline milestones.	`Action<GanttMilestone, GanttMilestoneStyling>`
`NewIdCreator`	Provides a factory used to create new item identifiers.	`Func<object>`
`NewItemClicked`	Notifies when the new-item command is triggered.	`EventCallback<GanttCommandContext<TItem>>`
`NewItemCreator`	Provides a factory used to create new item instances.	`Func<TItem>`
`ReadData`	Notifies when the Gantt requests data in manual read mode.	`EventCallback<GanttReadDataEventArgs<TItem>>`
`SearchTextChanged`	Notifies when SearchText changes.	`EventCallback<string>`
`SelectedRowChanged`	Notifies when SelectedRow changes.	`EventCallback<TItem>`
`SelectedViewChanged`	Notifies 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`
`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

Basic Usage

Flat Data Binding

API

Parameters

Gantt

GanttColumn

GanttCommandColumn

GanttDayView

GanttWeekView

GanttMonthView

GanttYearView

Events

Gantt

Methods

Gantt

GanttColumn

GanttCommandColumn

On this page