# gantt-default

> Gantt chart presents task columns, dependencies, weekend highlighting, and custom task and parent progress templates.

**Framework:** blazor  **Component:** Gantt  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/gantt-default.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-default/DataSource.cs

```cs
using System;
using System.Collections.Generic;
namespace BlazorDemos.Pages.GanttChart.Data
{
    public class GanttDefaultTaskData
    {
        public int TaskId { get; set; }
        public string? TaskName { get; set; }
        public DateTime? StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public DateTime? BaselineStartDate { get; set; }
        public DateTime? BaselineEndDate { get; set; }
        public string? Duration { get; set; }
        public int Progress { get; set; }
        public string? Predecessor { get; set; }
        public object? ResourceId { get; set; }
        public string? Notes { get; set; }
        public string? TaskType { get; set; }
        public int? ParentId { get; set; }
    }
    public class HolidayModel
    {
        public DateTime HolidayDate { get; set; }
        public string? HolidayName { get; set; }
    }
    internal static class DefaultData
    {
        /// <summary>
        /// Generates and returns a collection of Gantt task data.
        /// </summary>
        internal static List<GanttDefaultTaskData> ProjectNewData()
        {
            List<GanttDefaultTaskData> Tasks = new List<GanttDefaultTaskData>() {
                new GanttDefaultTaskData() { TaskId = 1, TaskName = "Product concept", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08), Duration = "5days" },
                new GanttDefaultTaskData() { TaskId = 2, TaskName = "Define the product usage", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08), Duration = "3", Progress = 30, ParentId = 1, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02) },
                new GanttDefaultTaskData() { TaskId = 3, TaskName = "Define the target audience", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 04), Progress = 40, Duration = "2Days", ParentId = 1 },
                new GanttDefaultTaskData() { TaskId = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2021, 04, 05), Duration = "4", Progress = 30, ParentId = 1, Predecessor = "2" },
                new GanttDefaultTaskData() { TaskId = 5, TaskName = "Concept approval", StartDate = new DateTime(2021, 04, 08), EndDate = new DateTime(2021, 04, 08), Duration = "0", ParentId = 1, Predecessor = "3,4" },
            };
            return Tasks;
        }
    }
}
```

### src/components/gantt-default/Gantt.razor

```razor
@page "/gantt-chart/default-functionalities"
@using Syncfusion.Blazor.Gantt
@using BlazorDemos.Pages.GanttChart.Data

<div class="control-section e-gantt-default-functionalities-sample">
	<SfGantt @ref="GanttInstance" DataSource="@TaskCollection" Height="450px" Width="100%" HighlightWeekends="true" TreeColumnIndex="1"
			 ProjectStartDate="@(new DateTime(2021, 3, 24))" ProjectEndDate="@(new DateTime(2021, 7, 25))" ScrollToTaskbarOnClick="true">
		<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
						 Duration="Duration" Progress="Progress" Dependency="Predecessor" ParentID="ParentId">
		</GanttTaskFields>
		<GanttColumns>
			<GanttColumn Field="TaskId"></GanttColumn>
			<GanttColumn Field="TaskName" Width="250"></GanttColumn>
			<GanttColumn Field="StartDate"></GanttColumn>
			<GanttColumn Field="EndDate"></GanttColumn>
			<GanttColumn Field="Duration"></GanttColumn>
			<GanttColumn Field="Progress"></GanttColumn>
			<GanttColumn Field="Predecessor"></GanttColumn>
		</GanttColumns>
		<GanttLabelSettings LeftLabel="TaskName" TValue="GanttDefaultTaskData"> </GanttLabelSettings>
		<GanttSplitterSettings Position="30%"> </GanttSplitterSettings>
		<GanttTemplates TValue="GanttDefaultTaskData">
			<TaskbarTemplate>
				@{
					var task = (context as GanttDefaultTaskData);
				}
				<div class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar" tabindex="-1">
					<div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="height:100%;width:@task?.Progress%;border-radius:0;">
						<span class="e-task-label">
							@(task?.Progress + "%")
						</span>
					</div>
				</div>
			</TaskbarTemplate>
			<ParentTaskbarTemplate>
				@{
					var task = (context as GanttDefaultTaskData);
				}
				<div class="e-gantt-parent-taskbar-inner-div e-gantt-parent-taskbar" style="text-overflow:ellipsis;width:100%;" tabindex="-1">
					<div class="e-gantt-parent-progressbar-inner-div e-row-expand e-gantt-parent-progressbar" style="height:100%;text-overflow:ellipsis;width:@task?.Progress%;border-radius:0;">
						<span class="e-task-label">
							@(task?.Progress + "%")
						</span>
					</div>
				</div>
			</ParentTaskbarTemplate>
		</GanttTemplates>
	</SfGantt>
</div>

@code {
        internal SfGantt<GanttDefaultTaskData>? GanttInstance { get; set; }
        internal List<GanttDefaultTaskData> TaskCollection { get; set; } = new List<GanttDefaultTaskData>();
        /// <summary>
        /// Initializes the Gantt chart with default task data.
        /// </summary>
        protected override async Task OnInitializedAsync()
        {
            TaskCollection = DefaultData.ProjectNewData();
            await Task.CompletedTask.ConfigureAwait(true);
        }

}
```