ContextMenus

The GanttControl employs several built-in context menus for different portions of the gantt as discussed below.

But, to begin with you have a couple of options to select a context menu framework that the gantt should work with. See this topic for more information on this.

GanttControl ContextMenus

The gantt provides an abstract API through which you customize the context menu items to be shown in the gantt, no matter which of the above scenarios applies to you.

You can customize the context menus by adding, removing items in the context menu.

The following context menus are built-in:

- Gantt Table Context Menus

- Gantt Chart Task Bar Context Menu

- Gantt Chart DependencyLine Context Menu

(The ....Samples\GanttCustomizingMenus sample illustrates the below features.)

Gantt Table Context Menus

This context menu is shown when right clicking on the table row. As seen in the screen-shot, there are built-in items like "Indent" and "Outdent" which you can augment with custom items like "My Custom Item 1" , "Add Item" and "Delete Item".

Built-in context menu with a custom item

You can add custom items like below.

var tableContextMenu = $('#ganttControl').data("GanttControl").TableContextMenu;

var ganttControl = $ganttControl.data("GanttControl");

var tableMenuItems = [

{ keyName: "MyCustomItem", name: "My Custom Item 1", icon: "My Custom Item 1", callback: function (key, opt){

var dataContext = grid.GetDataFromRow(opt.$trigger[0]);

alert("TaskInfo context in Table: TaskName: " + dataContext.Activity_M().ActivityName_M() + ", StartTime: " + dataContext.Activity_M().StartTime_M());

}

{ keyName: "AddItem", name: "Add Item", icon: "Add Item", callback: function (key, opt) {

var newRow = {

"Name": "New Task",

"ID": ganttControl.Model.GetNewID(),

"StartTime": anchorTime.clone(),

"Effort": new RQTimeSpan(0, 12, 30, 0, 0),

"ProgressPercent": 90,

"Cost": 100,

"Description": "Description of Task"

};

ganttControl.InsertNewItemAsSiblingBelow(newRow, ganttControl.SelectedIndex, true);

}

{ keyName: "DeleteItem" name: "Delete Item", icon: "Delete Item", callback: function (key, opt) {

var selectedItem = ganttControl.SelectedItem;

ganttControl.RemoveActivity(selectedItem.Activity.ID);

}

]

//Passing "false" as an second argument will disable the default contextMenu items. Default menu items are always enabled.

tableContextMenu.AddNewItems(tableMenuItems);

Gantt Chart Task Bar Context Menu

The context menu shown when right-clicking on the task bar has by default a "Convert to Milestone" item. You can add custom items to the menu as shown in the screen-shot.

The above mentioned CustomizingMenus sample illustrates how this can be implemented.

Here is the code snippet taken from the above sample to add a custom item.

var taskContextMenu = $('#ganttControl').data("GanttControl").TaskContextMenu;

taskMenuItems = [

{ name: "My Custom Item", icon: "My Custom Item", callback: function (key, opt) {

var dataContext = opt.$trigger[0].parentElement["data-grid-item"];

alert("TaskInfo context in Table: TaskName: " + dataContext.Activity.ActivityName + ", StartTime: " + dataContext.Activity.StartTime);

}

]

//Passing "false" as an second argument will disable the default contextMenu items. Default menu items are always enabled.

taskContextMenu.AddNewItems(taskMenuItems);

Gantt Chart Dependency Line Context Menus

Right clicking on the dependency lines show this context menu which will allow you to delete it. This can be customized along the same lines.

Here is the code snippet.

var dependencyContextMenu = $('#ganttControl').data("GanttControl").DependencyContextMenu;

dependencyMenuItems = [

{ keyName: "Info", name: "Info", icon: "Info", callback: function (key, opt) {

var dataContext = $(opt.$trigger[0].parentElement).data().GanttDependencyLine.options.DependencyView;

alert("From Activity : " + dataContext.StartActivity.ActivityName + "," + dataContext.StartTime + " To Activity" + dataContext.EndActivity.ActivityName + "," + dataContext.EndTime);

}

]

//Passing "false" as an second argument will disable the default contextMenu items. Default menu items are always enabled.

dependencyContextMenu.AddNewItems(dependencyMenuItems , false);