Search results

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

08 Apr 2021 / 1 minute to read

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.

tagHelper
openEditAddDialog.cs
Copied to clipboard
<ejs-button id="editDialog" content="Open Edit Dialog" cssClass="e-primary"></ejs-button>
                <ejs-button id="addDialog" content="Open Add Dialog" cssClass="e-primary"></ejs-button>

                <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 allowAdding="true" allowEditing="true"></e-gantt-editsettings>
                </ejs-gantt>
				
				<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>
Copied to clipboard
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.