# gantt-default-editing

> Editable Gantt chart supports adding, editing, deleting, taskbar changes, confirmation dialogs, and task progress tracking.

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

## 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-editing.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-editing/DataSource.cs

```cs
using System;
using System.Collections.Generic;
namespace BlazorDemos.Pages.GanttChart.Data
{
    public static class GanttData
    {
        internal sealed class TaskData
        {
            public int TaskId { get; set; }
            public string? TaskName { get; set; }
            public DateTime? StartDate { get; set; }
            public DateTime? EndDate { get; set; }
            public string? Duration { get; set; }
            public int Progress { get; set; }
            public string? Predecessor { get; set; }
            public string? Notes { get; set; }
            public int? ParentId { get; set; }
        }
        /// <summary>
        /// Generates and returns a collection of Gantt task data.
        /// </summary>
        internal static List<TaskData> EditingData()
        {
            List<TaskData> Tasks = new List<TaskData>() {
                new TaskData() { TaskId = 1, TaskName = "Planning and permits", StartDate = new DateTime(2025, 04, 02), EndDate = new DateTime(2025, 04, 10), Duration = "7 days", Progress = 100 }, // Completed
                new TaskData() { TaskId = 2, TaskName = "Site evaluation", StartDate = new DateTime(2025, 04, 02), EndDate = new DateTime(2025, 04, 04), Duration = "2 days", Progress = 100, ParentId = 1 }, // Completed
                new TaskData() { TaskId = 3, TaskName = "Obtain permits", StartDate = new DateTime(2025, 04, 07), EndDate = new DateTime(2025, 04, 09), Duration = "3 days", Progress = 100, ParentId = 1, Predecessor = "2" }, // Completed
                new TaskData() { TaskId = 4, TaskName = "Finalize planning", StartDate = new DateTime(2025, 04, 10), EndDate = new DateTime(2025, 04, 11), Duration = "2 days", Progress = 100, ParentId = 1, Predecessor = "3" }, // Completed
                new TaskData() { TaskId = 5, TaskName = "Site preparation", StartDate = new DateTime(2025, 04, 14), EndDate = new DateTime(2025, 04, 18), Duration = "5 days", Progress = 100,  }, // Completed
                new TaskData() { TaskId = 6, TaskName = "Site clearing", StartDate = new DateTime(2025, 04, 14), Duration = "0", Progress = 100, ParentId = 5, Predecessor = "4"}, // Completed
            };
            return Tasks;
        }        
    }
}
```

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

```razor
@page "/gantt-chart/editing"
@using Syncfusion.Blazor.Gantt
@using BlazorDemos.Pages.GanttChart.Data
<div class="control-section e-gantt-editing-sample">
    <SfGantt @ref="GanttInstance" DataSource="@TaskCollection" Height="100%" Width="1200px" HighlightWeekends="true"
             Toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent" })"
             AllowSelection="true" GridLines="Syncfusion.Blazor.Gantt.GridLine.Both" TreeColumnIndex="1"
             ProjectStartDate="@(new DateTime(2025, 3, 25))" ProjectEndDate="@(new DateTime(2025, 9, 01))" ScrollToTaskbarOnClick="true">
        <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress"
                         Dependency="Predecessor" ParentID="ParentId"></GanttTaskFields>
        <GanttEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" AllowTaskbarEditing="true" ShowDeleteConfirmDialog="true"></GanttEditSettings>
        <GanttColumns>
            <GanttColumn Field="TaskId" Width="100"></GanttColumn>
            <GanttColumn Field="TaskName" HeaderText="Job Name" Width="250" ClipMode="Syncfusion.Blazor.Grids.ClipMode.EllipsisWithTooltip"></GanttColumn>
            <GanttColumn Field="StartDate" HeaderText="Start Date"></GanttColumn>
            <GanttColumn Field="EndDate" HeaderText="End Date"></GanttColumn>
            <GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
            <GanttColumn Field="Progress" HeaderText="Progress"></GanttColumn>
            <GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
        </GanttColumns>
        <GanttLabelSettings LeftLabel="TaskName" TaskLabel="Progress" TValue="GanttData.TaskData"></GanttLabelSettings>
        @* <GanttSplitterSettings ColumnIndex="2"></GanttSplitterSettings> *@
    </SfGantt>
</div>

@code {
    internal SfGantt<GanttData.TaskData>? GanttInstance { get; set; }
        internal List<GanttData.TaskData> TaskCollection { get; set; } = new List<GanttData.TaskData>();
        /// <summary>
        /// Initializes the Gantt chart with Editing task data.
        /// </summary>
        protected override async Task OnInitializedAsync()
        {
            TaskCollection = GanttData.EditingData().ToList();
            await Task.CompletedTask.ConfigureAwait(true);
        }
}
```