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

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

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}