Set new row position in Gantt

17 Feb 20227 minutes to read

In Gantt, a new row can be added in one of the following positions: Top, Bottom, Above, Below and Child. This position can be specified through the newRowPostion property. We can make use of the toolbarClick event to create a context menu that specifies the position in which the new row is to be added when adding a record through toolbar click.

The following code snippets demonstrate how to achieve this.

@{
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add("Add");
    toolbarItems.Add("Edit");
}



<ejs-contextmenu id="contextmenu" items="ViewBag.menuItems" select="itemSelect"></ejs-contextmenu>

<ejs-gantt id='Gantt' dataSource="ViewBag.DataSource" height="450px" toolbar=toolbarItems toolbarClick="toolbarClick" >
    <e-gantt-taskfields id="taskID" name="taskName" startDate="startDate"
                        endDate="endDate" duration="duration" progress="progress" parentID="parentID">
    </e-gantt-taskfields>
    <e-gantt-editsettings allowEditing="true" allowAdding="true" mode="Dialog" allowTaskbarEditing="true">
    </e-gantt-editsettings>

</ejs-gantt>

<script>
    

    function toolbarClick(args) {
        if (args.item.text === "Add") {
            args.cancel = true;
            var contextMenuObj = document.getElementById("contextmenu").ej2_instances[0];
            contextMenuObj.open(60, 78);
        }
    }
    function itemSelect(args) {
        var ganttObj = document.getElementById("Gantt").ej2_instances[0];
        if (args.item.text === "Bottom") {
            ganttObj.editSettings.newRowPosition = "Bottom";
            ganttObj.openAddDialog();
        } else if (args.item.text === "Above") {
            if (ganttObj.selectedRowIndex == -1) {
                alert("Please select any row");
            } else {
                ganttObj.editSettings.newRowPosition = "Above";
                ganttObj.openAddDialog();
            }
        } else if (args.item.text === "Below") {
            if (ganttObj.selectedRowIndex == -1) {
                alert("Please select any row");
            } else {
                ganttObj.editSettings.newRowPosition = "Below";
                ganttObj.openAddDialog();
            }
            
        } else if (args.item.text === "Child") {
            if (ganttObj.selectedRowIndex == -1) {
                alert("Please select any row");
            } else {
                ganttObj.editSettings.newRowPosition = "Child";
                ganttObj.openAddDialog();
            }
        } else if (args.item.text === "Top") {
            ganttObj.editSettings.newRowPosition = "Top";
            ganttObj.openAddDialog();
        }
    }
    
</script>
public IActionResult Index()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Top"
            });
            menuItems.Add(new
            {
                text = "Bottom"
            });
            menuItems.Add(new
            {
                text = "Above"
            });
            menuItems.Add(new
            {
                text = "Below"
            });
            menuItems.Add(new
            {
                text = "Child"
            });
            ViewBag.menuItems = menuItems;

            ViewBag.DataSource = GanttData.ProjectNewData();
            return View();
        }