As we are inserting columns dynamically into the board, we have observed what might be a gap or a design that we need to work around. In one of our use cases, the columns are a multi-valued attribute where each value is an object that defines the displayValue (column name), a type and a sequence number. As we are deriving columns from our data, these is no guarantee that we get our columns returned in sorted order.
Starting from zero columns, inserting a column using:
taskBoard.columns.insert(2, { id: 2, text: 'Index 2'});
Does not appear to actually insert into the columns array at position 2. It actually becomes column 0 in the array. So on the next insert call:
taskBoard.columns.insert(1, { id: 1, text: 'Index 1'});
The column gets inserted on the right side of the first column, which is incorrect in our use case. It should have inserted the column on the left side.
We are looking for a solution or work around where the inserted column actually sets the array position according to the index value passed.
Here is the taskboard code that reproduces the issue.
STR:
- Paste code into the Bryntum taskboard editor.
- Click buttons in order (3, 2, 1) to simulate calling insert() with a specific index
Expected Behavior:
1, 2, 3
Actual Behavior:
3, 1, 2
import { DomHelper, TaskBoard, GlobalEvents } from '../../build/taskboard.module.js?460470';
import shared from '../_shared/shared.module.js?460470';
const taskBoard = new TaskBoard({
appendTo : 'container',
// Experimental, transition moving cards using the editor
useDomTransition : true,
features : {
columnDrag : true
},
// Columns holding the tasks
columns: [],
//columns: [{ id: 0, hidden: true }]
//columns : [
// 'todo',
// 'doing',
// 'review',
// 'done'
//],
// Field on task records that will be used to determine which column it should be displayed in
columnField : 'status',
// Field to display in task footer
footerItems : {
id : { type : 'text', editor : null }
},
tbar : [
{
type : 'label',
text : 'Theme'
},
{
type : 'buttonGroup',
items : ['0', '1', '2', '3', '4'].map(name => {
return {
ref : name.toLowerCase(),
text : name,
pressed : DomHelper.themeInfo.name === name,
enableToggle : true,
toggleGroup : 'theme',
onAction({ source: button }) {
let index = +button.text;
taskBoard.columns.insert(index, { id: '' + index, text: 'Index ' + index });
}
};
})
}
],
// Project holding tasks, resources and assignments
project : {
transport : {
load : {
url : 'data/data.json'
}
},
autoLoad : true
},
// Custom task renderer, that adds prio as CSS class to the task element
taskRenderer({ taskRecord, cardConfig }) {
if (taskRecord.prio) {
cardConfig.class[taskRecord.prio] = true;
}
}
});
GlobalEvents.on({
theme({ theme }) {
taskBoard.widgetMap[theme].pressed = true;
}
});