Problems with adding new columns and tasks

[staffanwe]

Hello! I am using the Bryntum TaskBoard 7.1.1 for Vue 3 and i have a problem with creating new columns. And tasks ending up in both the catch all column with id '*' and the newly created column. I am using remote loaded columns and the columnField is 'list'.

My setup is this:
I have a ColumnModel for the columns

   columns: {
        modelClass: ColumnModel
      },

export default class ColumnModel extends BryntumColumnModel {
  static get fields() {
    return [
      // Base fields from Bryntum ColumnModel are inherited (id, name, status, weight, etc.)
      // Custom fields for Check
      { name: 'text', type: 'string', persist: true },
      { name: 'color', type: 'string', persist: true }
    ]
  }
}

This is my code for adding a column to my board:

  function addList(listData = {}) {
    if (!taskBoardRef.value?.instance?.value) return

taskBoardRef.value.instance.value.columns.add({
  text: listData.text || 'New List',
  color: listData.color || 'lightGrey',
  width: 280
})
  }

Creating the column is fine, everything works. Then, when i click add task, a new task is created, but it will appear both in my new column and in the catch all column with id '*'. The taskBoardRef is a shallowRef so it should not be a problem.

The task has the correct list value and when i reload the task only appears in the correct column.

Any ideas for what could cause this problem?

[alex.l]

Hi staffanwe,

Not sure I got it correct. Are you using "*" as a value for column id field? Or I got it wrong?

[staffanwe]

Not really. I have one column with id '*'. As in this demo https://bryntum.com/products/taskboard/examples/catch-all-column/

As mentioned in the docs that column should "catch" all tasks that have no matching columnField.

And it kind of does, but when i create a new column and creates a task on that column (no reloading the page) the task will appear in both the "catch all" column and the column i just created.

The sync is working correcyly when i add a column, this is the response:

"columns": {
    "rows": [
        {
            "$PhantomId": "_generatedColumnModel_03a5275b-624f-469e-b455-25533ede87af",
            "id": "test_1770361259740"
        }
    ]
}

And when i add the task it has the correct id is passed in the "list" field. This is what i base my columns on

"tasks": {
    "added": [
        {
            "startDate": null,
            "endDate": null,
            "duration": null,
            "durationUnit": "day",
            "cls": "",
            "name": "New task",
            "exceptionDates": [],
            "allDay": false,
            "prio": 0,
            "weight": 200,
            "collapsed": false,
            "list": "test_1770361259740",
            "completedAt": null,
            "$PhantomId": "_generatedTaskModel_19412646-aa14-4d79-903c-963524c284e2"
        }
    ]
}

And the response:

"tasks": {
    "rows": [
        {
            "$PhantomId": "_generatedTaskModel_19412646-aa14-4d79-903c-963524c284e2",
            "id": 212
        }
    ]
}

I feel like my ProjectModel does not recognize the new column fully after the sync, and puts the task both in the catch-all colymn and in the correct one.

Skärmavbild 2026-02-06 kl. 08.05.39.png (41.97 KiB) Viewed 8455 times

[mats]

Any chance you can post a complete test case (or tweak one of our demos) so we can run this locally and debug it?

[staffanwe]

Yes! I edited your simple demo. If you click the button "Add column" and then add a task to that new column called New List, the New task will appear in both the new column and the "catch-all" column i have added in "columns" with id "*"

[ahmadzaheer]

Hello,

Thanks for reporting the issue. Here is a ticket which you can track regarding the fix for this: https://github.com/bryntum/support/issues/12621.

[staffanwe]

Thanks!