Set new row position in Gantt

17 Feb 20226 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.

CSHTML

@{
        List<object> toolbarItems = new List<object>();
        toolbarItems.Add("Add");
        toolbarItems.Add("Edit");
		}
@Html.EJS().ContextMenu("contextmenu").Items((IEnumerable<object>)ViewBag.menuItems).Select("itemSelect").Render()
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
                "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
                ).ToolbarClick("toolbarClick").Toolbar(toolbarItems).EditSettings(es=>es.AllowEditing(true).AllowAdding(true).AllowDeleting(true)).Render()



<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>

Newrowposition.cs

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();
        }