Deleting tasks in gantt control

3 Jan 20242 minutes to read

Deleting Tasks

A task delete option in the Gantt control can be enabled by enabling the EdiSettings.AllowDeleting property. Tasks can be deleted by clicking the delete toolbar item or using the deleteRow method. You can call this method dynamically on any custom actions like button click. The following code example shows how to enable the delete option in the Gantt control.

@Html.EJS().Button("deleteRecord").Content("Delete Record").CssClass("e-primary").Render()
        @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.AllowDeleting(true)).Render()
        
		<script>
            document.getElementById('deleteRecord').addEventListener('click', function (args) {
               var ganttObj = document.getElementById('Gantt').ej2_instances[0];
               ganttObj.editModule.deleteRow();
            });
	    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

NOTE

You should select any one of the rows in the Gantt control to perform task delete action.

You should set the AllowDeleting value to true to delete the record dynamically.

Delete confirmation message

Delete confirmation message is used to get the confirmation from users before deleting a task. This confirmation message can be enabled by setting the EditSettings.ShowDeleteConfirmDialog property to true.

The following code snippet explains how to enable the delete confirmation message in Gantt.

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

Alt text