Column Insert Behavior

[ahelis]

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.

Screen Shot 2022-07-19 at 3.05.24 PM.png (52.63 KiB) Viewed 528 times

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:

1. Paste code into the Bryntum taskboard editor.
2. 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;
    }
});

[tasnim]

Hi,
It is working fine, Because when the store is empty or there are fewer existing records than the requested index, then the requested index is useless.
When the store is empty and if you request to insert it in index 3, as there are no records in the store, this will be inserted as the first item.

Please let us know if you need any other help?

[ahelis]

Thanks for confirming the insert behavior.