ColumnHeaderMenu

Adds a menu button (···) to column headers, clicking it displays a menu. Items are populated by other features and/or application code.

Column header menu

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

    features : {
        columnDrag       : true,
        columnToolbars   : false,
        // Enable column header menus
        columnHeaderMenu : true
    },

    // 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 : 'Click ··· above', status : 'todo' }
        ]
    }
});

Default items

These are the default items provided by TaskBoard features:

Reference	Weight	Feature	Description
`addTask`	100	This feature	Add a new task to this column
`moveColumnLeft`	200	ColumnDrag	Move column one step left
`moveColumnRight`	300	ColumnDrag	Move column one step right
`lock`	400	ColumnLock	Lock columns on right side
`unlock`	400	ColumnLock	Unlock locked columns

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 column headers 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 : {
        columnHeaderMenu : {
            items : {
                flagTasks : {
                    text : 'Flag task',
                    icon : 'fa-fw fa-flag',
                    onItem({ columnRecord }) {
                        columnRecord.tasks.forEach(taskRecord => taskRecord.flagged = true);
                    }
                }
            }
        }
    }
});

Column header menu add

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

    features : {
        columnToolbars   : false,
        // Enable column header menus
        columnHeaderMenu : {
            items : {
                // Add a new custom menu item
                flagTask : {
                    text   : 'Flag tasks',
                    icon   : 'fa-fw fa-flag b-color-red',
                    weight : 50, // At top
                    onItem({ columnRecord }) {
                        columnRecord.tasks.forEach(taskRecord => taskRecord.flagged = true);
                    }
                }
            }
        }
    },

    // 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 : 'Task 1', status : 'todo' },
            { id : 2, name : 'Task 2', status : 'doing', flagged : true },
            { id : 3, name : 'Task 3', status : 'done' },
            { id : 4, name : 'Task 4', status : 'done' }
        ]
    },

    // 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 : {
        columnHeaderMenu : {
            items : {
                moveColumnLeft  : null,
                moveColumnRight : null
            }
        }
    }
});

Column header menu remove

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

    features : {
        columnDrag       : true,
        columnToolbars   : false,
        // Enable column header menus
        columnHeaderMenu : {
            items : {
                // Remove these default items
                moveColumnLeft  : null,
                moveColumnRight : null
            }
        }
    },

    // 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 : 'Click ··· above', status : 'todo' }
        ]
    }
});

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 : {
        columnHeaderMenu : {
            items : {
                // Change the text of the "Add new task" item
                addTask : {
                    text : 'New card'
                }
            }
        }
    }
});

Column header menu customize

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

    features : {
        columnToolbars   : false,
        // Enable column header menus
        columnHeaderMenu : {
            items : {
                addTask : { text : 'New card' }
            }
        }
    },

    // 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 : 'Task 1', status : 'todo' },
            { id : 2, name : 'Task 2', status : 'doing' },
            { id : 3, name : 'Task 3', status : 'done' }
        ]
    }
});

Manipulating items at runtime

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

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

                 // Do not show "Add new task" for the todo column
                 if (columnRecord.id === 'todo') {
                     items.addTask = null;
                 }
            }
        }
    }
});

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

Column header menu process items

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

    features : {
        columnDrag       : true,
        columnToolbars   : false,
        columnHeaderMenu : {
            // Process items before menu is shown
            processItems({ columnRecord, items }) {
                // Push an extra item for the done column
                if (columnRecord.id === 'done') {
                    items.archive = {
                        text : 'Archive',
                        icon : 'fa-fw fa-archive',
                        onItem({ columnRecord }) {
                            columnRecord.tasks.forEach(taskRecord => taskRecord.archived = true);
                        }
                    };
                }

                // Do not show "Add new task" for the todo column
                if (columnRecord.id === 'todo') {
                    items.addTask = null;
                }
            }
        }
    },

    // 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 : 'Task 1', status : 'todo' },
            { id : 2, name : 'Task 2', status : 'doing' },
            { id : 3, name : 'Task 3', status : 'done' }
        ]
    }
});

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 column header
`Ctrl`+`Space`	showContextMenuByKey	Shows context menu for currently focused column header

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 null:

const scheduler = new Scheduler({
    features : {
        columnHeaderMenu : {
            items : {
                addTask : null
            }
        }
    }
});

See the class description for more examples.

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         : {
      columnHeaderMenu : {
          processItems({ columnRecord, items }) {
             // Push an extra item for the todo column
             if (columnRecord.id === 'todo') {
                 items.finishAll = {
                     text : 'Finish all',
                     icon : 'fa-fw fa-check'
                     onItem({ columnRecord }) {
                         columnRecord.tasks.forEach(taskRecord => taskRecord.status = 'done');
                     }
                 };
              }
          }
      }
  }
});

Parameter	Type	Description
`context`	Object	An object with information about the menu being shown
`context.feature`	ColumnHeaderMenu	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.columnRecord`	ColumnModel	The column for which the menu will be shown
`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

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isColumnHeaderMenu: Boolean= truereadonly

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

isColumnHeaderMenu: Boolean= truereadonlystatic

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

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

isTaskBoardFeatureTaskBoardFeature

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

cellMenuItem

This event fires on the owning TaskBoard when an item is selected in the column header menu.

// Adding a listener using the "on" method
columnHeaderMenu.on('cellMenuItem', ({ source, menu, item, columnRecord }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`item`	MenuItem	Selected menu item
`columnRecord`	ColumnModel	The column

cellMenuShow

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

// Adding a listener using the "on" method
columnHeaderMenu.on('cellMenuShow', ({ source, menu, items, columnRecord }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`items`	Object<string, MenuItemEntry>	Menu item configs
`columnRecord`	ColumnModel	The column

cellMenuToggleItem

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

// Adding a listener using the "on" method
columnHeaderMenu.on('cellMenuToggleItem', ({ source, menu, item, columnRecord, checked }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`item`	MenuItem	Selected menu item
`columnRecord`	ColumnModel	The column
`checked`	Boolean	Checked or not

columnHeaderMenuBeforeShow

This event fires on the owning TaskBoard before the menu is shown for a column header. 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
columnHeaderMenu.on('columnHeaderMenuBeforeShow', ({ source, menu, items, columnRecord }) => {

});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`items`	Object<string, MenuItemEntry>	Menu item configs
`columnRecord`	ColumnModel	The column

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onCellMenuItem

This event called on the owning TaskBoard when an item is selected in the column header menu.

new ColumnHeaderMenu({
    onCellMenuItem({ source, menu, item, columnRecord }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`item`	MenuItem	Selected menu item
`columnRecord`	ColumnModel	The column

onCellMenuShow

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

new ColumnHeaderMenu({
    onCellMenuShow({ source, menu, items, columnRecord }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`items`	Object<string, MenuItemEntry>	Menu item configs
`columnRecord`	ColumnModel	The column

onCellMenuToggleItem

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

new ColumnHeaderMenu({
    onCellMenuToggleItem({ source, menu, item, columnRecord, checked }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`item`	MenuItem	Selected menu item
`columnRecord`	ColumnModel	The column
`checked`	Boolean	Checked or not

onColumnHeaderMenuBeforeShow

This event called on the owning TaskBoard before the menu is shown for a column header. 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 ColumnHeaderMenu({
    onColumnHeaderMenuBeforeShow({ source, menu, items, columnRecord }) {

    }
});

Parameter	Type	Description
`source`	TaskBoard	The grid
`menu`	Menu	The menu
`items`	Object<string, MenuItemEntry>	Menu item configs
`columnRecord`	ColumnModel	The column

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

ColumnHeaderMenu

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

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs