DependencyMenu

Displays a context menu when right-clicking dependency lines. Items are populated by other features and/or application code.

Dependencies
//<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;
                 }
            }
        }
    }
});

The 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

Common

disabledInstancePlugin
listenersEvents

Other

items: Object<String, MenuItemEntry>

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.

processItems: function

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;
            }
        }
    }
},
ParameterTypeDescription
contextObject

An object with information about the menu being shown.

context.featureDependencyMenu

A reference to this feature.

context.domEventEvent

The initiating event.

context.pointNumber[]

The client X and Y position of the initiating event.

context.targetElementHTMLElement

The target to which the menu is being applied.

context.dependencyRecordDependencyModel

The dependency record.

context.itemsObject<String, MenuItemEntry>

An object containing the menu item configs keyed by their id.

Returns: Boolean | null -

Returning false from this function prevents the menu being shown.

clickTriggerSelectorContextMenuBase
keyMapContextMenuBase
menuContextMenuBase
namedItemsContextMenuBase
preventNativeMenuContextMenuBase
triggerEventContextMenuBase
typeContextMenuBase

Misc

clientInstancePlugin
localeClassLocalizable
localizableLocalizable

Properties

19

Common

disabledInstancePlugin

Class hierarchy

isDependencyMenu: Boolean= truereadonly
Identifies an object as an instance of DependencyMenu class, or subclass thereof.
isDependencyMenu: Boolean= truereadonlystatic
Identifies an object as an instance of DependencyMenu class, or subclass thereof.
isContextMenuBaseContextMenuBase
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable

Other

An informational object containing contextual information about the last activation of the context menu.

menuContextMenuBase
preventNativeMenuContextMenuBase

Lifecycle

configBase

Misc

clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Functions

29

Configuration

applyDefaultsstaticBase

Events

Lifecycle

destroystaticBase

Misc

doDisableInstancePlugin
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

LstaticLocalizable
onEvents
relayAllEvents
showContextMenuContextMenuBase
triggerEvents
unEvents

Events

10

This 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 }) => {

});
ParameterTypeDescription
sourceScheduler
itemsObject<String, MenuItemEntry>

Menu item configs

dependencyRecordDependencyModel

Dependency record for which the menu was triggered

elementHTMLElement
eventMouseEvent

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 }) => {

});
ParameterTypeDescription
sourceScheduler
dependencyRecordDependencyModel

Dependency record for which the menu was triggered

itemMenuItem

The menu item

elementHTMLElement

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 }) => {

});
ParameterTypeDescription
sourceScheduler
menuMenu

The menu

dependencyRecordDependencyModel

Dependency record for which the menu was triggered

elementHTMLElement

The dependency element

catchAllEvents
contextMenuItemContextMenuBase
contextMenuToggleItemContextMenuBase
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

10

This 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 }) {

    }
});
ParameterTypeDescription
sourceScheduler
itemsObject<String, MenuItemEntry>

Menu item configs

dependencyRecordDependencyModel

Dependency record for which the menu was triggered

elementHTMLElement
eventMouseEvent

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 }) {

    }
});
ParameterTypeDescription
sourceScheduler
dependencyRecordDependencyModel

Dependency record for which the menu was triggered

itemMenuItem

The menu item

elementHTMLElement

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 }) {

    }
});
ParameterTypeDescription
sourceScheduler
menuMenu

The menu

dependencyRecordDependencyModel

Dependency record for which the menu was triggered

elementHTMLElement

The dependency element

onContextMenuItemContextMenuBase
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

4

A context object passed to any processItems method defined for a context menu feature, and the basis of events fired by context menu features.

ParameterTypeDescription
dependencyRecordDependencyModel

The dependency record clicked on.

MenuContextContextMenuBase
MenuItemEntryContextMenuBase