ColumnToolbars

Adds toolbars to the top and/or bottom of each column. By default it adds a bottom toolbar containing a single button for adding events to that column/swimlane:

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

    features : {
        columnToolbars : true
    },

    // Swimlanes to display
    swimlanes : [
        'high',
        'low'
    ],

    swimlaneField : 'prio',

    columns : [
        'todo',
        'doing',
        'done'
    ],

    columnField : 'status',

    project : {
        tasks : [
            { id : 1, name : 'Easter campaign', status : 'doing', prio : 'high' },
            { id : 2, name : 'Follow up', status : 'done', prio : 'low' },
            { id : 3, name : 'Adjust ads', status : 'doing', prio : 'low' },
            { id : 4, name : 'Spring campaign', status : 'todo', prio : 'low' },
            { id : 5, name : 'Survey', status : 'todo', prio : 'low' }
        ]
    }
});

To add, remove or modify toolbar items for all columns, see topItems and bottomItems:

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

    features : {
        columnToolbars : {
            // By default it displays a bottom toolbar (bbar) with an add button.
            // Here we also add a top toolbar with the same button
            topItems : {
                addTask : true
            },

            // And add a remove all button to the bottom
            bottomItems : {
                removeAll : {
                    icon    : 'fa-trash',
                    tooltip : 'Remove tasks in the column',
                    onClick : 'up.onRemoveAllClick'
                }
            }
        }
    },

    columns : [
        'todo',
        'doing',
        'done'
    ],

    columnField : 'status',

    project : {
        tasks : [
            { id : 1, name : 'Easter campaign', status : 'doing', prio : 'high' },
            { id : 2, name : 'Follow up', status : 'done', prio : 'low' },
            { id : 3, name : 'Adjust ads', status : 'doing', prio : 'low' },
            { id : 4, name : 'Spring campaign', status : 'todo', prio : 'low' },
            { id : 5, name : 'Survey', status : 'todo', prio : 'low' }
        ]
    },

    onRemoveAllClick({ source }) {
        taskBoard.project.taskStore.remove(source.columnRecord.tasks);
    }
});

To have per column/swimlane control over the items, see processItems:

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

    features : {
        columnToolbars : {
            // Using processItems it is possible to affect the items at runtime.
            // We use it here to hide the add task button in the Done column
            processItems({ items, columnRecord }) {
                if (columnRecord.id === 'done') {
                    items.addTask = false;
                }
            }
        }
    },

    columns : [
        'todo',
        'doing',
        'done'
    ],

    columnField : 'status',

    project : {
        tasks : [
            { id : 1, name : 'Easter campaign', status : 'doing', prio : 'high' },
            { id : 2, name : 'Follow up', status : 'done', prio : 'low' },
            { id : 3, name : 'Adjust ads', status : 'doing', prio : 'low' },
            { id : 4, name : 'Spring campaign', status : 'todo', prio : 'low' },
            { id : 5, name : 'Survey', status : 'todo', prio : 'low' }
        ]
    },

    onRemoveAllClick({ source }) {
        taskBoard.project.taskStore.remove(source.columnRecord.tasks);
    }
});

In handlers for buttons etc, you can access which column/swimlane the action was taken in on the supplied source param, using its columnRecord and swimlaneRecord properties:

new TaskBoard({
   features : {
       columnToolbars : {
           topItems : {
               clearButton : {
                   icon    : 'fa-trash',
                   onClick({ source }) {
                       if (source.columnRecord) {
                           ...
                       }
                   }
               }
           }
       }
   }
});

This feature is enabled by default.

Configs

12

Common

disabledInstancePlugin
listenersEvents

Other

bottomItems: Object<String, (ContainerItemConfig|Boolean|null)>

Items to add to the bottom toolbar, in object format.

To remove existing items, set corresponding keys to null.

new TaskBoard({
   features : {
       columnToolbars : {
           bottomItems : {
               clearButton : {
                   icon    : 'fa-trash',
                   onClick : ...
               }
           }
       }
   }
});
processItems: function

A function called before displaying the toolbar that allows manipulations of its items. Returning false from this function prevents the menu being shown.

features         : {
   columnToolbars : {
        processItems({ items, location, columnRecord, swimlaneRecord }) {
            // Add or hide existing items here as needed
            items.myAction = {
                text   : 'Cool action',
                icon   : 'fa-ban',
                onClick : () => console.log(`Clicked button for ${columnRecord.text}`)
            };

           if (columnRecord.id === 'done') {
               items.addTask = false
           }
        }
    }
},
ParameterTypeDescription
contextObject

An object with information about the toolbar being shown

context.featureColumnToolbars

A reference to this feature.

context.itemsObject<String, ContainerItemConfig>

An object containing the toolbar item configs keyed by ref

context.locationtop | bottom

Toolbar location, "top" or "bottom"

context.columnRecordColumnModel

Record representing toolbars column

context.swimlaneRecordSwimlaneModel

Record representing toolbars swimlane

Returns: Boolean | null -

Returning false from this function prevents the menu being shown

topItems: Object<String, (ContainerItemConfig|Boolean|null)>

Items to add to the top toolbar, in object format.

new TaskBoard({
   features : {
       columnToolbars : {
           topItems : {
               clearButton : {
                   icon    : 'fa-trash',
                   onClick : ...
               }
           }
       }
   }
});
catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents
callOnFunctionsEvents
clientInstancePlugin
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable

Properties

16

Common

disabledInstancePlugin

Class hierarchy

isColumnToolbars: Boolean= truereadonly
Identifies an object as an instance of ColumnToolbars class, or subclass thereof.
isColumnToolbars: Boolean= truereadonlystatic
Identifies an object as an instance of ColumnToolbars class, or subclass thereof.
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable
isTaskBoardFeatureTaskBoardFeature

Lifecycle

configBase
isConstructingBase
isDestroyedBase
isDestroyingBase

Misc

callOnFunctionsEvents
clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

Functions

28

Configuration

applyDefaultsstaticBase

Events

detachListenersBase

Lifecycle

constructBase
constructorBase
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

5
beforeDestroyEvents
catchAllEvents
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

5
onBeforeDestroyEvents
onCatchAllEvents
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

1

CSS variables

2
NameDescription
--b-task-board-column-toolbars-colorPrimary color for buttons in column toolbars
--b-task-board-column-toolbars-font-sizeFont size for buttons in column toolbars