TaskMenu

Displays a context menu for tasks. Items are populated by other features and/or application code.

Task menu

//<code-header>
fiddle.title = 'Task menu';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskMenu       : true
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Right click me', status : 'doing' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

You can optionally also use a TaskMenuItem button to display the menu.

Default items

These are the default items provided by TaskBoard features:

Reference	Weight	Feature	Description
`editTask`	100	TaskEdit	Open task editor. Hidden when read-only
`resources`	200	This feature	Assign/unassign resources. Hidden when read-only
`column`	300	This feature	Move to column. Hidden when read-only
`swimlane`	400	This feature	Move to swimlane. Hidden when read-only
`removeTask`	500	This feature	Remove task. Hidden when read-only

Default items in the menu can be changed or removed and new items can be added. This is handled using the items config of the feature.

Add items

Add menu items for all tasks by adding a key (used as menu item ref) with a config object for a menu item as the value to the items config:

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            items : {
                flagTask : {
                    text : 'Flag task',
                    icon : 'fa-fw fa-flag',
                    onItem({ taskRecord }) {
                        taskRecord.flagged = true;
                    }
                }
            }
        }
    }
});

Task menu add

//<code-header>
fiddle.title = 'Task menu add';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskMenu       : {
            items : {
                // Add a new custom menu item
                flagTask : {
                    text   : 'Flag task',
                    icon   : 'fa-fw fa-flag b-color-red',
                    weight : 50, // At top
                    onItem({ taskRecord }) {
                        taskRecord.flagged = true;
                    }
                }
            }
        }
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        taskStore : {
            fields : ['flagged']
        },

        tasks : [
            { id : 1, name : 'Right click me', status : 'doing', flagged : false }
        ]
    },

    // Custom renderer to add an icon to a cards header when flagged
    taskRenderer({ taskRecord, cardConfig }) {
        cardConfig.children.header.children.flag = taskRecord.flagged && {
            tag   : 'i',
            class : 'fa fa-flag b-color-red'
        };
    }
});

Remove items

To remove default items, configure them as null in the items config:

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            items : {
                removeTask : null,
                resources : null
            }
        }
    }
});

Task menu remove

//<code-header>
fiddle.title = 'Task menu remove';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskMenu       : {
            items : {
                // Remove these default items
                resources  : null,
                removeTask : null
            }
        }
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Right click me', status : 'doing' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

Customize items

To customize default items, supply a new config object for them in the items config. It will merge with the default config object:

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            items : {
                removeTask : {
                    text : 'Delete card'
                }
            }
        }
    }
});

Task menu customize

//<code-header>
fiddle.title = 'Task menu customize';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskMenu       : {
            items : {
                // Customize a default item
                removeTask : {
                    text : 'Delete card',
                    icon : 'fa-fw fa-times-circle b-color-red'
                }
            }
        }
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Right click me', status : 'doing' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

Manipulating items at runtime

Manipulate items for all tasks or specific tasks at runtime by supplying a processItems function:

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            // Process items before menu is shown
            processItems({ taskRecord, items }) {
                 // Push an extra item for done tasks
                 if (taskRecord.status === 'done') {
                     items.archive = {
                         text : 'Archive',
                         icon : 'fa-fw fa-archive'
                         onItem({ taskRecord }) {
                             taskRecord.archived = true;
                         }
                     };
                 }

                 // Do not show menu for low prio tasks
                 if (taskRecord.prio === 'low') {
                     return false;
                 }
            }
        }
    }
});

The `processItems` implementation my be an `async` function which `awaits` a result to mutate the `items` object.

Task menu process items

//<code-header>
fiddle.title = 'Task menu process items';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false,
        taskMenu       : {
            // Process items before menu is shown
            processItems({ taskRecord, items }) {
                // Push an extra item for done tasks
                if (taskRecord.status === 'done') {
                    items.archive = {
                        text : 'Archive',
                        icon : 'fa-fw fa-archive',
                        onItem({ taskRecord }) {
                            taskRecord.archived = true;
                        }
                    };
                }
                // Do not show menu for low prio tasks
                if (taskRecord.prio === 'low') {
                    return false;
                }
            }
        }
    },

    headerItems : {
        resourceAvatars : { type : 'resourceAvatars' }
    },

    footerItems : {
        resourceAvatars : null
    },

    // Url for resource avatar images
    resourceImagePath : 'data/Grid/images/transparent-users/',

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Move me to Done and right click me', status : 'doing' }
        ],

        resources : [
            { id : 1, name : 'Angelo', image : 'angelo.png' },
            { id : 2, name : 'Celia', image : 'celia.png' },
            { id : 3, name : 'Dave', image : 'dave.png' }
        ],

        assignments : [
            { id : 1, event : 1, resource : 1 }
        ]
    }
});

This feature is enabled by default.

Keyboard shortcuts

This feature has the following default keyboard shortcuts:

Keys	Action	Action description
`Space`	showContextMenuByKey	Shows context menu for currently focused task
`Ctrl`+`Space`	showContextMenuByKey	Shows context menu for currently focused task

Please note that Ctrl is the equivalent to Command and Alt is the equivalent to Option for Mac users

For more information on how to customize keyboard shortcuts, please see our guide.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

items: Object<string, MenuItemEntry>

This is a preconfigured set of items used to create the default context menu.

The items provided by this feature are listed in the intro section of this class. You can configure existing items by passing a configuration object to the keyed items.

To remove existing items, set corresponding keys to null:

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            items : {
                editTask : 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 from being shown.

const taskBoard = new TaskBoard({
  features         : {
      taskMenu : {
          processItems({ taskRecord, items }) {
             // Add a custom menu item for tasks with progress greater than 90
             if (taskRecord.progress > 90) {
                 items.close = {
                     text : 'Close',
                     icon : 'fa-fw fa-check',
                     onItem({ taskRecord }) {
                         taskRecord.done = true;
                     }
                 }
             }
          }
      }
  }
});

Parameter	Type	Description
`context`	Object	An object with information about the menu being shown
`context.feature`	TaskMenu	A reference to this feature.
`context.domEvent`	Event	The initiating event.
`context.event`	Event	DEPRECATED: The initiating event.
`context.point`	Number[]	The client `X` and `Y` position of the initiating event.
`context.targetElement`	HTMLElement	The target to which the menu is being applied.
`context.taskRecord`	TaskModel	The task for which the menu will be shown
`context.columnRecord`	ColumnModel	The column where the task belongs to
`context.items`	Object<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

showAvatars: Boolean= true

Show avatars/initials in the resource picker menu

const taskBoard = new TaskBoard({
    features : {
        taskMenu : {
            showAvatars : false
        }
    }
});

triggerEvent: String | Boolean= taskContextMenu

The mouse / touch gesture which should show this context menu (e.g. 'taskClick' or 'taskContextMenu'). Set to false to never trigger it from UI.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isTaskMenu: Boolean= truereadonly

Identifies an object as an instance of TaskMenu class, or subclass thereof.

isTaskMenu: Boolean= truereadonlystatic

Identifies an object as an instance of TaskMenu class, or subclass thereof.

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

isTaskBoardFeatureTaskBoardFeature

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

Other

showMenuFor

Show the context menu for a specific task, aligned to its card. Optionally aligned to an element in the card, using the supplied CSS selector.

Parameter	Type	Description
`taskRecord`	TaskModel	Task to show the menu for
`selector`	String	CSS selector, to align to a specific element in the task's card

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Events

taskMenuBeforeShow

This event fires on the owning TaskBoard before the context menu is shown for a task. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

// Adding a listener using the "on" method
taskMenu.on('taskMenuBeforeShow', ({ source, menu, items, taskRecord }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`items`	Object<string, MenuItemEntry>	Menu item configs
`taskRecord`	TaskModel	The task

taskMenuItem

This event fires on the owning TaskBoard when an item is selected in the task context menu.

// Adding a listener using the "on" method
taskMenu.on('taskMenuItem', ({ source, menu, item, taskRecord }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`item`	MenuItem	Selected menu item
`taskRecord`	TaskModel	The task

taskMenuShow

This event fires on the owning TaskBoard after the context menu is shown for a task.

// Adding a listener using the "on" method
taskMenu.on('taskMenuShow', ({ source, menu, items, taskRecord }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`items`	Object<string, MenuItemEntry>	Menu item configs
`taskRecord`	TaskModel	The task

taskMenuToggleItem

This event fires on the owning TaskBoard when a check item is toggled in the task context menu.

// Adding a listener using the "on" method
taskMenu.on('taskMenuToggleItem', ({ source, menu, item, taskRecord, checked }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`item`	MenuItem	Selected menu item
`taskRecord`	TaskModel	The task
`checked`	Boolean	Checked or not

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onTaskMenuBeforeShow

This event called on the owning TaskBoard before the context menu is shown for a task. Allows manipulation of the items to show in the same way as in the processItems.

Returning false from a listener prevents the menu from being shown.

new TaskMenu({
    onTaskMenuBeforeShow({ source, menu, items, taskRecord }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`items`	Object<string, MenuItemEntry>	Menu item configs
`taskRecord`	TaskModel	The task

onTaskMenuItem

This event called on the owning TaskBoard when an item is selected in the task context menu.

new TaskMenu({
    onTaskMenuItem({ source, menu, item, taskRecord }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`item`	MenuItem	Selected menu item
`taskRecord`	TaskModel	The task

onTaskMenuShow

This event called on the owning TaskBoard after the context menu is shown for a task.

new TaskMenu({
    onTaskMenuShow({ source, menu, items, taskRecord }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`items`	Object<string, MenuItemEntry>	Menu item configs
`taskRecord`	TaskModel	The task

onTaskMenuToggleItem

This event called on the owning TaskBoard when a check item is toggled in the task context menu.

new TaskMenu({
    onTaskMenuToggleItem({ source, menu, item, taskRecord, checked }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`item`	MenuItem	Selected menu item
`taskRecord`	TaskModel	The task
`checked`	Boolean	Checked or not

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

CSS variables

Name	Description
`--b-task-board-task-menu-resource-check-icon`	Resource menu item check icon (font icon)

TaskMenu

Default items

Add items

Remove items

Customize items

Manipulating items at runtime

Keyboard shortcuts

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Lifecycle

Misc

Other

Functions

Other

Configuration

Events

Lifecycle

Misc

Events

Event handlers

Typedefs

CSS variables