Articles in this section
Category / Section

How to add row dynamically in Gantt

1 min read

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 () {
$("#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);
alert("Please select the row");

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.



Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment