v7.3.0
SupportExamplesFree Trial

TaskMenu
Feature

Displays a context menu for tasks. Items are populated by other features and/or application code. Configure it with false to disable it completely. If enabled, CellMenu feature is not available. Cell context menu items are handled by this feature.

Default task menu items

Here is the list of menu items provided by the Task menu feature and populated by the other features:

Reference Text Weight Feature Description
editTask Edit task 100 TaskEdit Edit the task. Hidden when read-only
showDetails Show details 100 TaskEdit Show details of the task in a non-editable form. Hidden when not read-only
cut Cut task 110 TaskCopyPaste Cut the task
copy Copy task 120 TaskCopyPaste Copy the task
paste Paste task 130 TaskCopyPaste Paste the task
search* Search for value 200 Search Search for cell text
filterMenu Filter 400 Filter Shows a submenu to control filtering. See Filter submenu.
add Add... 500 This feature Submenu for adding tasks
>addTaskAbove Task above 510 This feature Add a new task above the selected task
>addTaskBelow Task below 520 This feature Add a new task below the selected task
>milestone Milestone 530 This feature Add a new milestone below the selected task
>subtask Subtask 540 This feature Add a new task as a child of the current, turning it into a parent
>successor Successor 550 This feature Add a new task below current task, linked using an "Finish-to-Start" dependency
>predecessor Predecessor 560 This feature Add a new task above current task, linked using an "Finish-to-Start" dependency
convertToMilestone Convert to milestone 600 This feature Turns the selected task into a milestone. Shown for leaf tasks only
splitTask Split task 650 EventSegments Split the task
indent Indent 700 This feature Add the task as a child of its previous sibling, turning that task into a parent
outdent Outdent 800 This feature Turn the task into a sibling of its parent
deleteTask Delete task 900 This feature Remove the selected task
linkTasks Add dependencies 1000 This feature Add dependencies between two or more selected tasks
unlinkTasks Remove dependencies 1010 This feature Removes dependencies between selected tasks
taskColor ¹ Color 1100 This feature Choose background color for the task bar

¹ Set showTaskColorPickers to true to enable this item

*
items that are shown for the locked grid cells only
>
first level of submenu

Customizing the menu items

The menu items in the Task 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.

To add extra items for all events:

const gantt = new Gantt({
    features : {
        taskMenu : {
            // Extra items for all events
            items : {
                flagTask : {
                    text : 'Extra',
                    icon : 'fa fa-fw fa-flag',
                    onItem({taskRecord}) {
                        taskRecord.flagged = true;
                    }
                }
            }
        }
    }
});

Remove menu/submenu items

Items can be removed from the menu:

const gantt = new Gantt({
    features : {
        taskMenu : {
            items : {
                // Hide delete task option
                deleteTask: false,

// Hide item from the `add` submenu add: { menu: { subtask: false } } } } } });

Manipulate items for specific tasks

Items can behave different depending on the type of the task:

const gantt = new Gantt({
    features : {
        taskMenu : {
            // Process items before menu is shown
            processItems({ items, taskRecord }) {
                 // Push an extra item for conferences
                 if (taskRecord.type === 'conference') {
                     items.showSessions = {
                         text : 'Show sessions',
                         ontItem({taskRecord}) {
                             // ...
                         }
                     };
                 }

// Do not show menu for secret events if (taskRecord.type === 'secret') { return false; } } } } });

Full information of the menu customization can be found in the "Customizing the Task menu" guide.

This feature is enabled by default

targetElement.innerHTML = '<p>A basic grid with no extra configuration, this what you get straight out of the box</p>'; const gantt = new Gantt({ appendTo : targetElement, // makes the Gantt chart as tall as it needs to be to fit all rows autoHeight : true, columns : [ { type : 'name', field : 'name', text : 'Name' } ], features : { taskMenu : true }, startDate : new Date(2019, 1, 4), endDate : new Date(2019, 1, 11), tasks : [ { id : 1, name : 'Project A', startDate : '2019-02-04', duration : 5, expanded : true, children : [ { id : 11, name : 'Preparation work', startDate : '2019-02-04', duration : 5 } ] } ] });

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • A CSS selector targeting an element, such as an ellipsis icon that when clicked will trigger the menu to show.

  • See Keyboard shortcuts for details

  • A config which will be applied when creating the Menu component.

    Has a corresponding runtime menu property.

  • Set to true to prevent the native menu from showing when there are no menu items to show, or you manually prevent the menu from showing in an event listener.

    Has a corresponding runtime preventNativeMenu property.

  • triggerEvent : 'contextmenu'/'click'/'dblclick'/null
    ContextMenuBase

    Event which is used to show context menu. Available options are: 'contextmenu', 'click' and 'dblclick'. Default value is used from contextMenuTriggerEvent

  • This is a type of the context menu used to generate correct names for methods and events. Should be in camel case. Required to be set in subclass.

  • Internal listeners, that cannot be removed by the user.

  • The widget which this plugin is to attach to.

    Has a corresponding runtime client property.

  • Set to false to disable localization of this object.

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isEvents : Booleantrue
    READONLY
    static
    ADVANCED
    Events
    Identifies an object as an instance of Events class, or subclass thereof.
  • isLocalizable : Booleantrue
    READONLY
    static
    ADVANCED
    Localizable
    Identifies an object as an instance of Localizable class, or subclass thereof.
  • isTaskMenu : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of TaskMenu class, or subclass thereof.
  • A class property getter for the default values of internal properties for this class.

  • emptyArray : Array
    internal
    READONLY
    ContextMenuBase

    An empty array that can be used as a default value.

  • emptyObject : Object
    internal
    READONLY
    ContextMenuBase

    An empty object that can be used as a default value.

  • isContextMenuBase : Booleantrue
    READONLY
    ADVANCED
    ContextMenuBase
    Identifies an object as an instance of ContextMenuBase class, or subclass thereof.
  • isEventMenu : Booleantrue
    READONLY
    ADVANCED
    EventMenu
    Identifies an object as an instance of EventMenu class, or subclass thereof.
  • isInstancePlugin : Booleantrue
    READONLY
    ADVANCED
    ContextMenuBase
    Identifies an object as an instance of InstancePlugin class, or subclass thereof.
  • isTaskMenu : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of TaskMenu class, or subclass thereof.
  • Identifies an object as an instance of TimeSpanMenuBase class, or subclass thereof.
  • baseItems : Object[]
    internal
    READONLY
    ContextMenuBase

    Returns the base, configured-in menu items set from the configured items, taking into account the namedItems the feature offers.

  • Gets the Menu instance that this feature is using.

    Has a corresponding menu config.

  • Set to true to prevent the native menu from showing when there are no menu items to show, or you manually prevent the menu from showing in an event listener.

    Has a corresponding preventNativeMenu config.

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

  • config : Object
    READONLY
    ADVANCED
    ContextMenuBase

    Returns a copy of the full configuration which was used to configure this object.

  • This property is set to true before the constructor returns.

  • This property is set to true on entry to the destroy method. It remains on the objects after returning from destroy(). If isDestroyed is true, this property will also be true, so there is no need to test for both (for example, comp.isDestroying || comp.isDestroyed).

  • client : Widget
    READONLY
    ADVANCED
    ContextMenuBase

    The Widget which was passed into the constructor, which is the Widget we are providing extra services for.

    Has a corresponding client config.

  • Get the global LocaleHelper

  • Get the global LocaleManager

Functions

Functions are methods available for calling on the class
  • onClassMixedIn( )
    internal
    static
    ContextMenuBase

    This optional class method is called when a class is mixed in using the mixin() method.

  • initClass( )
    static
    ADVANCED
    ContextMenuBase

    Registers this class type with its Factory

  • Hides the context menu

  • Internal function used to hook destroy() calls when using thisObj

  • Internal function used restore hooked destroy() calls when using thisObj

  • doDestroy( )
    internal
    Events

    Auto detaches listeners registered from start, if set as detachable

  • once( )
    private
    Events

    Internal function used to run a callback function after an event is triggered

  • Removes all listeners registered to this object by the application.

  • This will merge a feature's (subclass of InstancePlugin) keyMap with it's client's keyMap.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

Event handlers

Event handlers are callbacks called as a result of certain actions in this class
id: taskMenu

Source path

Gantt/feature/TaskMenu.js

Demo

examples/taskmenu

Contents