Adding new tasks in gantt control

21 Dec 20223 minutes to read

Tasks can be dynamically added to the Gantt project by enabling the EditSettings.AllowAdding property.

Toolbar

A row can be added to the Gantt component from the toolbar while the EditSettings.AllowAdding property is set to true. On clicking the toolbar add icon, you should provide the task information in the add dialog.

@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.AllowAdding(true)).Toolbar(new List<string>() { "Add" }).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

NOTE

By default, the new row will be added to the top most row in the Gantt control.

Context menu

A row can also be added above, below or child of the selected row by using context menu support. For this, we need to enable the property enableContextMenu and inject the ContextMenu module into the Gantt control.

@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").Dependency("Predecessor").Child("SubTasks")
         ).EnableContextMenu(true).AllowSorting(true).AllowResizing(true).EditSettings(es => es.AllowAdding(true)).Render()
public ActionResult Index()
        {
            ViewBag.DataSource = GanttData.ProjectNewData();
            return View();
        }

Alt text

Using method

You can add rows to the Gantt control dynamically using the addRecord method and you can define the add position of the default new record by using the RowPosition property. You can also pass the RowIndex as an additional parameter.

  • Top of all the rows.
  • Bottom to all the existing rows.
  • Above the selected row.
  • Below the selected row.
  • As child to the selected row.
@Html.EJS().Button("addRecord").Content("Add 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.AllowAdding(true)).Render()
			
    <script>
	    document.getElementById('addRecord').addEventListener('click', function (args) {
            var record = {
                TaskId: 10,
                TaskName: 'Newly Added Record',
                StartDate: new Date('04/02/2019'),
                Duration: 3,
                Progress: 50
            };
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.editModule.addRecord(record, 'Below', 2);
        });
	</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text