Context Menu in ASP.NET MVC Gantt control
The Gantt control allows you to perform quick actions by using context menu. When right-clicking the context menu, the context menu options are shown. To enable this feature, set the [enableContextMenu] to true. The default context menu options are enabled using the [editSettings] property. The context menu options can be customized using the [contextMenuItems] property.
The default items are listed in the following table.
| Items | Description |
|---|---|
AutoFit |
Auto-fits the current column. |
AutoFitAll |
Auto-fits all columns. |
SortAscending |
Sorts the current column in ascending order. |
SortDescending |
Sorts the current column in descending order. |
TaskInformation |
Edits the current task. |
Add |
Adds a new row to the Gantt. |
Indent |
Indent the selected record to one level. |
Outdent |
Outdent the selected record to one level. |
DeleteTask |
Deletes the current task. |
Save |
Saves the edited task. |
Cancel |
Cancels the edited task. |
DeleteDependency |
Deletes the current dependency task link. |
Convert |
Converts current task to milestone or vice-versa. |
@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").Dependency("Predecessor").Child("SubTasks")
).EnableContextMenu(true).AllowSorting(true).AllowResizing(true).EditSettings(es => es.AllowAdding(true).AllowEditing(
true).AllowDeleting(true)).Render()public IActionResult Index()
{
ViewBag.DataSource = GanttData.EditingData();
return View();
}
Custom context menu items
The custom context menu items can be added by defining the contextMenuItems as a collection of [contextMenuItemModel].
Actions for the customized items can be defined in the contextMenuClick event and the visibility of customized items can be defined in the [contextMenuOpen] event.
To create custom context menu items for header area, define the target property as .e-gridheader.
The following sample shows context menu item for parent rows to expand or collapse child rows in the content area and a context menu item to hide columns in the header area.
@{
List<object> contextItems = new List<object> { "AutoFitAll", "AutoFit", "TaskInformation", "DeleteTask", "Save", "Cancel",
"SortAscending", "SortDescending", "Add", "DeleteDependency", "Convert"};
contextItems.Add(new { text = "Collapse the Row", target = ".e-content", id = "collapserow" });
contextItems.Add(new { text = "Expand the Row", target = ".e-content", id = "expandrow" });
contextItems.Add(new { text = "Hide Column", target = ".e-gridheader", id = "hidecols" });
}
@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").Dependency("Predecessor").Child("SubTasks")
).EnableContextMenu(true).AllowSorting(true).AllowResizing(true).EditSettings(es => es.AllowAdding(true).AllowEditing(true).AllowDeleting(true)
).ContextMenuItems(contextItems).ContextMenuOpen("ContextMenuOpen").ContextMenuClick("ContextMenuClick").Render()
<script>
function ContextMenuOpen(args) {
var record = args.rowData;
if (args.type !== 'Header') {
if (!record.hasChildRecords) {
args.hideItems.push("Collapse the Row");
args.hideItems.push("Expand the Row");
} else {
if(record.expanded){
args.hideItems.push("Expand the Row");
} else {
args.hideItems.push("Collapse the Row");
}
}
}
}
function ContextMenuClick(args) {
var ganttObj = document.getElementById("Gantt").ej2_instances[0];
var record = args.rowData;
if (args.item.id === 'collapserow') {
ganttObj.collapseByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'expandrow') {
ganttObj.expandByID(Number(record.ganttProperties.taskId));
}
if (args.item.id === 'hidecols') {
ganttObj.hideColumn(args.column.headerText);
}
}
</script>public IActionResult Index()
{
ViewBag.DataSource = GanttData.EditingData();
return View();
}
You can show an specific item in context menu for header/content area in the Gantt control by defining the
targetproperty.