Search results

Adding New Tasks in JavaScript (ES5) Gantt control

22 Nov 2022 / 3 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.

Source
Preview
index.js
index.html
Copied to clipboard
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');
Copied to clipboard
<!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.3.56/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.3.56/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.

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 propertyenableContextMenu and inject the ContextMenu module into the Gantt control.

Source
Preview
index.js
index.html
Copied to clipboard
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');
Copied to clipboard
<!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.3.56/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.3.56/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>

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.
Source
Preview
index.js
index.html
Copied to clipboard
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);
});
Copied to clipboard
<!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.3.56/material.css" rel="stylesheet" type="text/css">
    
    
<script src="https://cdn.syncfusion.com/ej2/20.3.56/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>