# gantt-default-editing

> Gantt chart supports task editing, dependencies, custom dialog fields, and task markers.

**Framework:** aspnet-core  **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/aspnet-core/gantt-default-editing.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.AspNetCore.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/gantt.cshtml

```cshtml
@page
@using EJ2CoreSampleBrowser.Models;

<div class="control-section">
    <div class="row">
        <div class="col-md-12">
            <ejs-gantt id='Editing' dataSource="@GanttData.EditingData()" gridLines="Both" treeColumnIndex="1"
                       created="created" actionBegin="actionBegin" height="100%" rowHeight="46" taskbarHeight="25"
                       allowSelection="true" highlightWeekends="true" resources="@GanttData.EditingResources()"
                       projectStartDate="03/26/2025" projectEndDate="09/10/2025" enableHover="true"
                       toolbar="@(new List<string>() { "Add", "Edit", "Update", "Delete", "Cancel", "ExpandAll", "CollapseAll", "Indent", "Outdent" })">
                <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate"
                                    duration="Duration" progress="Progress" dependency="Predecessor" parentID="ParentID" notes="Notes"
                                    resourceInfo="ResourceId">
                </e-gantt-taskfields>
                <e-gantt-resourcefields id="ResourceId" name="ResourceName"></e-gantt-resourcefields>
                <e-gantt-splittersettings columnIndex="3"></e-gantt-splittersettings>
                <e-gantt-columns>
                    <e-gantt-column field="TaskId" width="80"></e-gantt-column>
                    <e-gantt-column field="TaskName" headerText="Job Name" width="250"
                                    clipMode="EllipsisWithTooltip"></e-gantt-column>
                    <e-gantt-column field="StartDate"></e-gantt-column>
                    <e-gantt-column field="EndDate"></e-gantt-column>
                    <e-gantt-column field="Duration"></e-gantt-column>
                    <e-gantt-column field="Progress"></e-gantt-column>
                    <e-gantt-column field="Predecessor"></e-gantt-column>
                </e-gantt-columns>
                <e-gantt-editsettings allowAdding="true" allowEditing="true" allowDeleting="true"
                                      allowTaskbarEditing="true" showDeleteConfirmDialog="true"></e-gantt-editsettings>
                <e-gantt-timelinesettings>
                    <e-timelinesettings-toptier unit="Week" format="MMM dd, y"></e-timelinesettings-toptier>
                    <e-timelinesettings-bottomtier unit="Day"></e-timelinesettings-bottomtier>
                </e-gantt-timelinesettings>
                <e-gantt-labelSettings leftLabel="TaskName" rightLabel="ResourceId"></e-gantt-labelSettings>
                <e-gantt-eventmarkers>
                    <e-gantt-eventmarker day="4/17/2024" label="Project approval and kick-off"></e-gantt-eventmarker>
                    <e-gantt-eventmarker day="5/3/2024" label="Foundation inspection"></e-gantt-eventmarker>
                    <e-gantt-eventmarker day="6/7/2024" label="Site manager inspection"></e-gantt-eventmarker>
                    <e-gantt-eventmarker day="7/16/2024" label="Property handover and sign-off"></e-gantt-eventmarker>
                </e-gantt-eventmarkers>
                <e-gantt-editdialogfields>
                    <e-gantt-editdialogfield type="General"></e-gantt-editdialogfield>
                    <e-gantt-editdialogfield type="Dependency"></e-gantt-editdialogfield>
                    <e-gantt-editdialogfield type="Resources"></e-gantt-editdialogfield>
                    <e-gantt-editdialogfield type="Notes"></e-gantt-editdialogfield>
                </e-gantt-editdialogfields>
            </ejs-gantt>
        </div>
    </div>
</div>
<script>
    var startDate
    function created(args) {
        var gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
        gantt.treeGrid.grid.columns[1].validationRules = { required: true, minLength: [5, 'Task name should have a minimum length of 5 characters'] };
        gantt.treeGrid.grid.columns[3].validationRules = { required: [customFn, 'Please enter a value greater than the start date.'] };
        gantt.treeGrid.grid.columns[4].validationRules = { required: true };
        gantt.treeGrid.grid.columns[5].validationRules = { required: true, min: 0, max: 100 };
        gantt.enableHover = true;
    }
    function actionBegin(args) {
        if (args.columnName === "EndDate" || args.requestType === "beforeOpenAddDialog" || args.requestType === "beforeOpenEditDialog") {
            startDate = args.rowData.ganttProperties.startDate;
        }
        if (args.requestType === "taskbarediting" && args.taskBarEditAction === "ChildDrag") {
            startDate = args.data.ganttProperties.startDate;
        }
    }
    function customFn(args) {
        var endDate;
        var gantt = (document.getElementsByClassName('e-gantt')[0]).ej2_instances[0];
        if (args.element && args.value) {
            var dateOptions = { format: gantt.dateFormat, type: 'dateTime', skeleton: 'yMd' };
            endDate = gantt.globalize.parseDate(args.value, dateOptions);
            if (!startDate && gantt.editModule.dialogModule['beforeOpenArgs']) {
                startDate = gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].startDate;
                endDate = gantt.editModule.dialogModule['beforeOpenArgs'].rowData['ganttProperties'].endDate;
            }
            startDate.setHours(0, 0, 0, 0);
            endDate.setHours(0, 0, 0, 0);
        }
        return startDate <= endDate;
    }

</script>
```

### src/components/gantt-default-editing/gantt.cshtml.cs

```cs
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace EJ2CoreSampleBrowser.Models;

public class GanttData : PageModel
{
    public static List<GanttDataSource> EditingData()
    {
        var GanttDataSourceCollection = new List<GanttDataSource>();

        GanttDataSource Record1 = new GanttDataSource()
        {
            TaskId = 1,
            TaskName = "Planning and permits",
            StartDate = new DateTime(2025, 4, 2),
            EndDate = new DateTime(2025, 4, 10),
            Duration = 7,
            Progress = 100,
            ResourceId = new int[] { 1, 2, 3 }
        };
        GanttDataSource Record2 = new GanttDataSource()
        {
            TaskId = 2,
            TaskName = "Site evaluation",
            StartDate = new DateTime(2025, 4, 2),
            EndDate = new DateTime(2025, 4, 4),
            Duration = 2,
            Progress = 100,
            ParentID = 1,
            ResourceId = new int[] { 1 }
        };
        GanttDataSource Record3 = new GanttDataSource()
        {
            TaskId = 3,
            TaskName = "Obtain permits",
            StartDate = new DateTime(2025, 4, 7),
            EndDate = new DateTime(2025, 4, 9),
            Duration = 3,
            Progress = 100,
            ParentID = 1,
            Predecessor = "2",
            ResourceId = new int[] { 2, 4 }
        };
        
        GanttDataSourceCollection.Add(Record1);
        GanttDataSourceCollection.Add(Record2);
        GanttDataSourceCollection.Add(Record3);
        return GanttDataSourceCollection;
    }

    public static List<GanttResources> EditingResources()
    {
        List<GanttResources> GanttResourcesCollection = new List<GanttResources>();

        GanttResources Record1 = new GanttResources()
        {
            ResourceId = 1,
            ResourceName = "Martin Tamer"
        };
        GanttResources Record2 = new GanttResources()
        {
            ResourceId = 2,
            ResourceName = "Rose Fuller"
        };
        GanttResources Record3 = new GanttResources()
        {
            ResourceId = 3,
            ResourceName = "Margaret Buchanan"
        };

        GanttResourcesCollection.Add(Record1);
        GanttResourcesCollection.Add(Record2);
        GanttResourcesCollection.Add(Record3);
        return GanttResourcesCollection;
    }
}
public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public string Predecessor { get; set; }
    public int[] ResourceId { get; set; }
    public int? ParentID { get; set; }
}

public class GanttResources
{
    public int ResourceId { get; set; }
    public string ResourceName { get; set; }
    public Nullable<int> Unit { get; set; }
}
```
