Editing Tasks Using Taskbar Drag and Resize in ASP.NET MVC Gantt Chart

Taskbar editing

Modify the task details through user interaction such as resizing and dragging the taskbar by enabling the AllowTaskbarEditing property.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
        "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).EditSettings(es =>
         es.AllowTaskbarEditing(true)).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Prevent editing for specific tasks

On taskbar edit action, the TaskbarEditing event will be triggered. You can prevent the taskbar from editing by setting the cancel property of the TaskbarEditing event argument to true. Hide the taskbar editing indicators like taskbar resizer, progress resizer, and connector points using the QueryTaskbarInfo event. The following code example shows how to achieve this.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskbarEditing("taskbarEditing").TaskFields(
        ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
        ).EditSettings(es => es.AllowTaskbarEditing(true)).QueryTaskbarInfo("queryTaskbarInfo").Render()
        
    <script>
        function taskbarEditing(args) {
           if (args.data.TaskId == 4) // We can't edit Task Id 4
                args.cancel = true;
        }
        function queryTaskbarInfo(args) {
            if (args.data.TaskId == 6) {
                args.taskbarElement.className += ' e-preventEdit' // Taskbar editing indicators are disabled
            }
        }
    </script>

    <style>
        .e-gantt-chart .e-preventEdit .e-right-resize-gripper,
        .e-gantt-chart .e-preventEdit .e-left-resize-gripper,
        .e-gantt-chart .e-preventEdit .e-progress-resize-gripper,
        .e-gantt-chart .e-preventEdit .e-left-connectorpoint-outer-div,
        .e-gantt-chart .e-preventEdit .e-right-connectorpoint-outer-div {
                         display: none;
        }
    </style>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Enable taskbar drawing

The Gantt Chart control supports creating new tasks by dragging directly on the timeline. This feature is enabled via the allowTaskbarDraw property in the GanttEditSettings configuration. Taskbar drawing is intended for scheduling unscheduled tasks and requires AllowUnscheduledTasks to be enabled.

Dragging across the timeline schedules an unscheduled task by defining its timeline range. The resulting task duration is calculated based on the configured scheduling settings.

The following example demonstrates how to enable taskbar drawing:

@using Syncfusion.EJ2

<div class="control-section">
	@(Html.EJS().Gantt("Gantt")
        .DataSource((IEnumerable<object>)ViewBag.DataSource)
        .Height("450px")
        .ProjectStartDate("03/28/2019")
        .ProjectEndDate("05/18/2019")
        .TaskFields(tf => tf
            .Id("TaskId")
            .Name("TaskName")
            .StartDate("StartDate")
            .Duration("Duration")
            .EndDate("EndDate")
        )
        .LabelSettings(ls => ls.LeftLabel("TaskName"))
        .AllowUnscheduledTasks(true)
        .EditSettings(es => es
            .AllowTaskbarEditing(true)
            .AllowTaskbarDragAndDrop(true)
        )
        .Render()
    )
</div>
public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewBag.DataSource = new List<TaskData>()
        {
            new TaskData
            {
                TaskId = 1,
                TaskName = "Product Design",
                StartDate = new DateTime(2026, 4, 2),
                EndDate = new DateTime(2026, 4, 21)
            },
            new TaskData
            {
                TaskId = 2,
                TaskName = "Requirement analysis"
            },
            new TaskData
            {
                TaskId = 3,
                TaskName = "Resource Planning",
                StartDate = new DateTime(2026, 4, 3),
                Duration = 5
            },
            new TaskData
            {
                TaskId = 4,
                TaskName = "Design Review"
            },
            new TaskData
            {
                TaskId = 5,
                TaskName = "Document Preparation"
            }
        };
        return View();
    }
    public class TaskData
    {
        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; }
    }
}