Taskbar Editing in ASP.NET Core Gantt Chart

Taskbar editing

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

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px">
                    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
                    </e-gantt-taskfields>
                    <e-gantt-editsettings allowTaskbarEditing="true"></e-gantt-editsettings>
                </ejs-gantt>
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 using the TaskbarEditing event. This can be done by setting cancel property of TaskbarEditing event argument to true. And we can hide the taskbar editing indicators like taskbar resizer, progress resizer and connector points by using QueryTaskbarInfo event. The following code example shows how to achieve this.

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" taskbarEditing="taskbarEditing" queryTaskbarInfo="queryTaskbarInfo">
                    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
                    </e-gantt-taskfields>
                    <e-gantt-editsettings allowTaskbarEditing="true"></e-gantt-editsettings>
                </ejs-gantt>
				
				 <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:

<div class="control-section">
    <ejs-gantt id="Gantt"
               dataSource="Model.GanttDataSourceCollection"
               height="450px"
               projectStartDate="03/28/2019"
               projectEndDate="05/18/2019"
               allowUnscheduledTasks="true">

        <e-gantt-taskfields id="TaskId"
                            name="TaskName"
                            startDate="StartDate"
                            duration="Duration"
                            endDate="EndDate">
        </e-gantt-taskfields>

        <e-gantt-labelsettings leftLabel="TaskName">
        </e-gantt-labelsettings>

        <e-gantt-editsettings allowTaskbarEditing="true"
                              allowTaskbarDragAndDrop="true">
        </e-gantt-editsettings>

    </ejs-gantt>
</div>
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace CoreSamples.Pages
{
    public class IndexModel : PageModel
    {
        public List<GanttDataSource> GanttDataSourceCollection { get; set; }

        public void OnGet()
        {
            GanttDataSourceCollection = GetTaskCollection();
        }

        private List<GanttDataSource> GetTaskCollection()
        {
            return new List<GanttDataSource>()
            {
                new GanttDataSource
                {
                    TaskId = 1,
                    TaskName = "Product Design",
                    StartDate = new DateTime(2026, 4, 2),
                    EndDate = new DateTime(2026, 4, 21)
                },
                new GanttDataSource
                {
                    TaskId = 2,
                    TaskName = "Requirement analysis"
                },
                new GanttDataSource
                {
                    TaskId = 3,
                    TaskName = "Resource Planning",
                    StartDate = new DateTime(2026, 4, 3),
                    Duration = 5
                },
                new GanttDataSource
                {
                    TaskId = 4,
                    TaskName = "Design Review"
                },
                new GanttDataSource
                {
                    TaskId = 5,
                    TaskName = "Document Preparation"
                }
            };
        }
    }

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