ColumnResize

This feature allows users to change the width of individual TaskBoard columns. Resize is initiated upon mouse down on the separator element between column headers. Try it out below!

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

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

    columns : [
        'todo',
        { id : 'doing', text : 'Resize me' },
        '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' }
        ]
    }
});

Resize events

The different stages of a resize operation trigger different events, in order of appearance:

Event Description
beforeColumnResize Preventable event fired before a resize starts
columnResizeStart Fired when resizing starts
columnResize Fired after a resize gesture that lead to changes

This feature is disabled by default.

Configs

9

Common

disabledInstancePlugin
listenersEvents

Misc

clientInstancePlugin
localeClassLocalizable
localizableLocalizable

Other

Properties

16

Common

disabledInstancePlugin

Class hierarchy

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

Lifecycle

configBase

Misc

clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Other

Functions

28

Configuration

applyDefaultsstaticBase

Events

Lifecycle

destroystaticBase

Misc

doDisableInstancePlugin
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Other

LstaticLocalizable
onEvents
relayAllEvents
triggerEvents
unEvents

Events

8

This event is fired prior to starting a column resize gesture. The resize is canceled if a listener returns false.

// Adding a listener using the "on" method
columnResize.on('beforeColumnResize', ({ source, column, domEvent }) => {

});
ParameterTypeDescription
sourceTaskBoard

The TaskBoard instance

columnColumnModel

The column

domEventEvent

The browser event

This event is fired after a resize gesture is completed.

// Adding a listener using the "on" method
columnResize.on('columnResize', ({ source, column, domEvent }) => {

});
ParameterTypeDescription
sourceTaskBoard

The TaskBoard instance

columnColumnModel

The column

domEventEvent

The browser event

This event is fired when a column resize gesture starts.

// Adding a listener using the "on" method
columnResize.on('columnResizeStart', ({ source, column, domEvent }) => {

});
ParameterTypeDescription
sourceTaskBoard

The TaskBoard instance

columnColumnModel

The column

domEventEvent

The browser event

catchAllEvents
destroyEvents
disableInstancePlugin
enableInstancePlugin

Event handlers

8

This event is called prior to starting a column resize gesture. The resize is canceled if a listener returns false.

new ColumnResize({
    onBeforeColumnResize({ source, column, domEvent }) {

    }
});
ParameterTypeDescription
sourceTaskBoard

The TaskBoard instance

columnColumnModel

The column

domEventEvent

The browser event

This event is called after a resize gesture is completed.

new ColumnResize({
    onColumnResize({ source, column, domEvent }) {

    }
});
ParameterTypeDescription
sourceTaskBoard

The TaskBoard instance

columnColumnModel

The column

domEventEvent

The browser event

This event is called when a column resize gesture starts.

new ColumnResize({
    onColumnResizeStart({ source, column, domEvent }) {

    }
});
ParameterTypeDescription
sourceTaskBoard

The TaskBoard instance

columnColumnModel

The column

domEventEvent

The browser event

onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin

Typedefs

1

CSS variables

1
NameDescription
--b-task-board-column-resize-handle-min-widthMinimum width of the resize handle.