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