Search results

Open Add Edit Dialog Dynamically in ASP.NET MVC Gantt control

Gantt add and edit dialogs can be opened dynamically by using openAddDialog and openEditDialog methods. The following code example shows how to open add and dialog on separate button click actions.

razor
openEditAddDialog.cs
@Html.EJS().Button("editDialog").Content("Open Edit Dialog").CssClass("e-primary").Render()
    @Html.EJS().Button("addDialog").Content("Open Add Dialog").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.AllowEditing(true).AllowAdding(true)).Render()
        
	<script>
        document.getElementById('editDialog').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.editModule.dialogModule.openEditDialog();
        });

        document.getElementById('addDialog').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.editModule.dialogModule.openAddDialog();
        });
	</script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

NOTE: We should select any one of the row in Gantt to open the edit dialog.