How to add row dynamically in Gantt

In Gantt, it is possible to add a row dynamically at run time using the addRecord public method. The following code snippet explains how to add a row at run time.

<div style="padding-bottom:5px;"> <button id="addRow">Add Row</button></div>
<div id="gantt" style="height:400px; width:100%"></div>    
<script type="text/javascript">
$(function () {
$("#gantt").ejGantt({
//...
});
});
$("#addRow").click(function () {
var ganttObject = $("#gantt").data("ejGantt"),
selectedItem = ganttObject.model.selectedItem,
rowPosition = "aboveselectedrow";
if (selectedItem) {
selectedItem = $.extend({}, ganttObject.model.selectedItem.item);
delete selectedItem[ganttObject.model.childMapping];
ganttObject.addRecord(selectedItem, rowPosition);
}
else
alert("Please select the row");
});
</script>
</body>

The list of available values for rowPosition argument in addRecord public method are:

1. top – New rows will be added at the top of the all Gantt records

2. bottom - New rows will be added at the bottom of the all Gantt records

3. belowselectedrow - New rows will be added below the selected row

4. aboveselectedrow - New rows will be added above the selected row and

5. child - New rows will be added as child record to the selected row

Sample Link:

A sample to get add the new row dynamically in Gantt is available in the following link.

Sample