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!
//<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
Configs
9Misc
Other
Properties
16
Properties
16Common
Class hierarchy
Other
Functions
28
Functions
28Configuration
Events
Misc
Other
Events
8
Events
8This 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 }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TaskBoard | The TaskBoard instance |
column | ColumnModel | The column |
domEvent | Event | 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 }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TaskBoard | The TaskBoard instance |
column | ColumnModel | The column |
domEvent | Event | 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 }) => {
});| Parameter | Type | Description |
|---|---|---|
source | TaskBoard | The TaskBoard instance |
column | ColumnModel | The column |
domEvent | Event | The browser event |
Event handlers
8
Event handlers
8This 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 }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TaskBoard | The TaskBoard instance |
column | ColumnModel | The column |
domEvent | Event | The browser event |
This event is called after a resize gesture is completed.
new ColumnResize({
onColumnResize({ source, column, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TaskBoard | The TaskBoard instance |
column | ColumnModel | The column |
domEvent | Event | The browser event |
This event is called when a column resize gesture starts.
new ColumnResize({
onColumnResizeStart({ source, column, domEvent }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | TaskBoard | The TaskBoard instance |
column | ColumnModel | The column |
domEvent | Event | The browser event |
Typedefs
1
Typedefs
1CSS variables
1
CSS variables
1| Name | Description |
|---|---|
--b-task-board-column-resize-handle-min-width | Minimum width of the resize handle. |