Tasks can be dynamically added to the Gantt project by enabling the editSettings.allowAdding property.
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.
ej.gantt.Gantt.Inject(ej.gantt.Toolbar);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
editSettings:{
allowAdding:true
},
toolbar: ['Add']
});
ganttChart.appendTo('#Gantt');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Gantt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Gantt Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>By default, the new row will be added to the top most row in the Gantt control.
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 propertyenableContextMenu and inject the ContextMenu module into the Gantt control.
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
enableContextMenu: true,
editSettings: {
allowAdding: true
},
});
ganttChart.appendTo('#Gantt');<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Gantt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Gantt Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>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.
ej.gantt.Gantt.Inject(ej.gantt.Toolbar,ej.gantt.Edit);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height:'450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
},
editSettings:{
allowAdding:true
}
});
ganttChart.appendTo('#Gantt');
var addBtn= new ej.buttons.Button();
addBtn.appendTo('#addRow');
document.getElementById('addRow').addEventListener('click', function() {
var record={ TaskID: 10,
TaskName: 'New Added Record',
StartDate: new Date('04/02/2019'),
Duration: 3,
Progress: 50
};
ganttChart.editModule.addRecord(record,'Below',2);
});<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Gantt</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript Gantt Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="addRow">Add Row</button>
<div id="Gantt"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>