Customizing the column header menu

Bryntum TaskBoard ships with a built-in menu for column headers, displayed when clicking the accompanying ··· button. The menu is populated by the task boards features and it can easily be customized to fit your application.

Click the ··· button in a column header to try it:

Turning the menu on

The menu is supplied by the ColumnHeaderMenu feature. This features is not enabled by default. To turn it on, configure it with true:

const taskBoard = new TaskBoard({
    features : {
        // Turn the column header menu on
        columnHeaderMenu : true
    }
});

Enabling or disabling the menu

You can also enable or disable the menu programmatically, perhaps depending on user rights:

const taskBoard = new TaskBoard({
    features : {
        columnHeaderMenu : {
            // The column header menu is created, but starts disabled
            disabled : true
        }
    }
});

// To enable
taskBoard.features.columnHeaderMenu.disabled = false;

// To disable again
taskBoard.features.columnHeaderMenu.disabled = true;

Try it in the demo below:

Default items

These are the default items in the column header menu, provided by TaskBoard features:

Customizing the items during configuration

The default items in the menu can be changed or removed and new items can be added for all columns at configuration time. This is handled using the items config of the feature.

Adding custom items

To add a custom menu item, supply a config object for the item (see MenuItem) using an unused ref (see table above for reserved names) as the key in the items config.

The most common configs are text, icon, checked and a handler for the item, onItem(). For example to add a custom item that "flags" all tasks in a column:

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

Removing default items

To remove a default item, set its ref (see table above) to null in the items config. For example to remove the "Remove task" and "Resources" items:

const taskBoard = new TaskBoard({
    features : {
        columnHeaderMenu : {
            items : {
                moveColumnLeft  : null,
                moveColumnRight : null
            }
        }
    }
});

Customizing a default item

To customize a default item you supply an object with the configs you want to change keyed by its ref in the items config. Any properties in the config object will be merged with the items defaults.

For example to change the text of the "Remove task" item and move it to top:

const taskBoard = new TaskBoard({
    features : {
        columnHeaderMenu : {
            items : {
                addTask : {
                    text   : 'New card'
                }
            }
        }
    }
});

Customizing items at runtime

The declarative approach used at configuration time (the items config) can only affect the menu for all columns at once. If you need greater control you can instead use the processItems config. It accepts a function that will be called each time the menu is shown.

If you supply a function, it will be called with arguments including the default items and the column the menu will be shown for. By manipulating the items object (very similar to how it is done at configuration time) you can determine which items are shown for that specific column. You can also manipulate their configs and prevent the menu from showing.

A small example that adds a custom item for the "Done" column and removed tha "Add new task" item for the "Todo" column:

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