DependencyMenu
Displays a context menu when right-clicking dependency lines. Items are populated by other features and/or application code.
//<code-header>
fiddle.title = 'Dependencies';
//</code-header>
const scheduler = new Scheduler({
appendTo : targetElement,
// makes scheduler as high as it needs to be to fit rows
autoHeight : true,
startDate : new Date(2018, 4, 6),
endDate : new Date(2018, 4, 13),
columns : [
{ field : 'name', text : 'Name', width : 100 }
],
resources : [
{ id : 1, name : 'Bernard' },
{ id : 2, name : 'Bianca' }
],
events : [
{ id : 1, resourceId : 1, name : 'Interview', startDate : '2018-05-06', endDate : '2018-05-07' },
{ id : 2, resourceId : 1, name : 'Press meeting', startDate : '2018-05-08', endDate : '2018-05-09' },
{ id : 3, resourceId : 2, name : 'Audition', startDate : '2018-05-07', endDate : '2018-05-09' },
{ id : 4, resourceId : 2, name : 'Script deadline', startDate : '2018-05-11', endDate : '2018-05-11' }
],
features : {
dependencies : {
clickWidth : 15
},
dependencyMenu : true,
dependencyEdit : {
editorConfig : {
items : {
// Custom label for the type field
typeField : {
label : 'Kind'
}
},
bbar : {
items : {
// Hiding save button
saveButton : {
hidden : true
}
}
}
}
}
},
dependencies : [
{ id : 1, from : 1, to : 2, cls : 'dev-path' },
{ id : 2, from : 2, to : 4 }
]
});Default dependency menu items
Here is the list of menu items provided by the feature and populated by the other features:
| Reference | Text | Weight | Feature | Description |
|---|---|---|---|---|
edit |
Edit | 100 | DependencyEdit | Edit in the dependency editor. Hidden when read-only |
delete |
Delete | 500 | This feature | Remove dependency. Hidden when read-only |
Customizing the menu items
The menu items in the dependency menu can be customized, existing items can be changed or removed,
and new items can be added. This is handled using the items config of the feature.
Add extra items for all dependencies:
const scheduler = new Scheduler({
features : {
dependencyMenu : {
items : {
extraItem : {
text : 'Extra',
icon : 'fa fa-fw fa-flag',
onItem({ dependencyRecord }) {
dependencyRecord.critical = true;
}
}
}
}
}
});
Remove existing items:
const scheduler = new Scheduler({
features : {
dependencyMenu : {
items : {
delete : false
}
}
}
});
Customize existing item:
const scheduler = new Scheduler({
features : {
dependencyMenu : {
items : {
delete : {
text : 'Delete link'
}
},
// Process items before menu is shown
processItems({ dependencyRecord, items}) {
// Push an extra item
if (dependencyRecord.isCritical === 'conference') {
items.markAsCriticalItem = {
text : 'Mark as critical',
onItem({ dependencyRecord }) {
// Do cool things
}
};
}
// Do not show menu for secret links
if (dependencyRecord.isSecret === 'secret') {
return false;
}
}
}
}
});
processItems implementation may be an async function which awaits a result to mutate the items object.
Note that the menuContext is applied to the Menu's item event, so your onItem
handler's single event parameter also contains the following properties:
- source The Scheduler whose UI was right-clicked.
- targetElement The element right-clicked on.
- dependencyRecord The dependency record clicked on.
This feature is enabled by default from version 7.0
Configs
18
Configs
18Other
This is a preconfigured set of items used to create the default context menu. The default options are listed at the top of the page.
To remove existing items, set corresponding keys null:
const scheduler = new Scheduler({
features : {
dependencyMenu : {
items : {
delete : null
}
}
}
});
See the feature config in the above example for details.
A function called before displaying the menu that allows manipulations of its items.
Returning false from this function prevents the menu being shown.
features : {
dependencyMenu : {
processItems({ items, dependencyRecord }) {
// Add or hide existing items here as needed
items.myAction = {
text : 'Cool action',
icon : 'fa fa-fw fa-ban',
onItem : () => console.log(`Clicked ${dependencyRecord.name}`),
weight : 1000 // Move to end
};
if (!dependencyRecord.allowDelete) {
items.delete.hidden = true;
}
}
}
},
| Parameter | Type | Description |
|---|---|---|
context | Object | An object with information about the menu being shown. |
context.feature | DependencyMenu | A reference to this feature. |
context.domEvent | Event | The initiating event. |
context.point | Number[] | The client |
context.targetElement | HTMLElement | The target to which the menu is being applied. |
context.dependencyRecord | DependencyModel | The dependency record. |
context.items | Object<String, MenuItemEntry> | An object containing the menu item configs keyed by their id. |
Returning false from this function prevents the menu being shown.
Misc
Properties
19
Properties
19Common
Class hierarchy
Functions
29
Functions
29Configuration
Events
Misc
Other
Events
10
Events
10This event fires on the owning Scheduler before the context menu is shown for a dependency.
Allows manipulation of the items to show in the same way as in processItems. Returning false from a listener
prevents the menu from being shown.
// Adding a listener using the "on" method
dependencyMenu.on('dependencyMenuBeforeShow', ({ source, items, dependencyRecord, element, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | |
items | Object<String, MenuItemEntry> | Menu item configs |
dependencyRecord | DependencyModel | Dependency record for which the menu was triggered |
element | HTMLElement | |
event | MouseEvent | Pointer event which triggered the context menu (if any) |
This event fires on the owning Scheduler when an item is selected in the context menu.
// Adding a listener using the "on" method
dependencyMenu.on('dependencyMenuItem', ({ source, dependencyRecord, item, element }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | |
dependencyRecord | DependencyModel | Dependency record for which the menu was triggered |
item | MenuItem | The menu item |
element | HTMLElement | The dependency element |
This event fires on the owning Scheduler after showing the context menu for an event
// Adding a listener using the "on" method
dependencyMenu.on('dependencyMenuShow', ({ source, menu, dependencyRecord, element }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | |
menu | Menu | The menu |
dependencyRecord | DependencyModel | Dependency record for which the menu was triggered |
element | HTMLElement | The dependency element |
Event handlers
10
Event handlers
10This event called on the owning Scheduler before the context menu is shown for a dependency.
Allows manipulation of the items to show in the same way as in processItems. Returning false from a listener
prevents the menu from being shown.
new DependencyMenu({
onDependencyMenuBeforeShow({ source, items, dependencyRecord, element, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | |
items | Object<String, MenuItemEntry> | Menu item configs |
dependencyRecord | DependencyModel | Dependency record for which the menu was triggered |
element | HTMLElement | |
event | MouseEvent | Pointer event which triggered the context menu (if any) |
This event called on the owning Scheduler when an item is selected in the context menu.
new DependencyMenu({
onDependencyMenuItem({ source, dependencyRecord, item, element }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | |
dependencyRecord | DependencyModel | Dependency record for which the menu was triggered |
item | MenuItem | The menu item |
element | HTMLElement | The dependency element |
This event called on the owning Scheduler after showing the context menu for an event
new DependencyMenu({
onDependencyMenuShow({ source, menu, dependencyRecord, element }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Scheduler | |
menu | Menu | The menu |
dependencyRecord | DependencyModel | Dependency record for which the menu was triggered |
element | HTMLElement | The dependency element |
Typedefs
4
Typedefs
4A context object passed to any processItems method defined for a context menu feature, and the basis of events
fired by context menu features.
| Parameter | Type | Description |
|---|---|---|
dependencyRecord | DependencyModel | The dependency record clicked on. |