Taskbar editing action in gantt control

3 Jan 20242 minutes to read

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 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.

@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();
}