Weird behavior in swimlane

[suhas.kachare]

Steps to Reproduce:

Go to --> https://bryntum.com/products/taskboard/examples/filtering/

Update swimlane config to:

[
  { id: 'very_high', text: 'High', color: 'red' },
  { id: 'high', text: 'Medium', color: 'yellow' },
  { id: 'low', text: 'Low', color: 'lime' }
]

Drag a card from Medium to High.

Issue:

1. Count increases, but the card is not shown in the swimlane (refer Count Mismatch image).

2. Sometimes duplicate cards are shown (e.g., Renew Passport) (refer Duplicate Cards image).

[alex.l]

Hi,

Thanks for the report, the ticket opened here https://github.com/bryntum/support/issues/12000
You can subscribe on ticket updates to be notified when it's done.

[suhas.kachare]

As the reported issue is scheduled for resolution in version 7.0.1, may I please know the expected release timeline for this version?

[tasnim]

We are aiming to release version 7.0.1 next week, if everything goes as planned.

You'll be notified via email when it's out.

Thank you for your patience.

[suhas.kachare]

Could you please provide a workaround for this issue in the meantime? A few of our customers are experiencing the problem and are requesting an urgent fix.

[ghulam.ghous]

Hi there,

We are planning to release on Monday if everything goes well. Here is a override which you can use:

class TaskBoardBaseOverride {
    static get target() {
        return {
            class : TaskBoardBase
        };
    }

    renderColumn(swimlaneRecord, columnRecord, columns) {
        const
            me                = this,
            {
                taskSorterFn,
                stretchCards,
                columnField,
                swimlaneField
            }                 = me,
            {
                width,
                flex,
                id,
                domId,
                minWidth,
                color,
                taskStore
            }                 = columnRecord,
            // Tasks in this column / swimlane intersection. Fetched using an index for better performance, except when
            // using a tree store, since only the expanded tasks are indexed then (only those are in storage)
            tasks             = taskStore.isTree || swimlaneRecord
                ? taskStore.query(r =>
                    r[columnField] === id &&
                    (!swimlaneField || !swimlaneRecord || r[swimlaneField] === swimlaneRecord.id) // Might have no lanes
                )
                : taskStore.records,
            perRow            = me.getTasksPerRow(columnRecord, swimlaneRecord),
            elementId         = `${me.id}-column-${swimlaneRecord?.domId ?? 'default'}-${domId}`,
            columnConfig      = {
                id    : elementId,
                class : {
                    'b-task-board-column'                                : 1,
                    'b-fixed-width'                                      : width && !flex,
                    [`b-${perRow}-task${perRow > 1 ? 's' : ''}-per-row`] : 1,
                    'b-inline'                                           : perRow > 1,
                    'b-last'                                             : columnRecord === columns[columns.length - 1]
                },
                style : {
                    '--b-primary' : DomHelper.createColorStyle(color),
                    width,
                    flex,
                    minWidth
                },
                dataset : {
                    column        : domId,
                    lane          : swimlaneRecord?.id,
                    domTransition : true
                },
                elementData : {
                    elementType : 'column',
                    columnId    : id,
                    laneId      : swimlaneRecord?.id
                },
                // Cards
                children : {
                    body : {
                        id    : `${elementId}-body`,
                        class : {
                            'b-task-board-column-body' : 1
                        },
                        dataset : {
                            role          : 'body',
                            domTransition : true
                        },
                        children : [
                            {
                                class : {
                                    'b-task-board-column-body-inner' : 1
                                },
                                style : {
                                    'grid-template-columns' : `repeat(${stretchCards ? Math.min(perRow, tasks.length) : perRow}, 1fr)`
                                },
                                dataset : {
                                    role          : 'inner',
                                    domTransition : true
                                },
                                children : (() => {
                                    // Optionally force sort order
                                    if (taskSorterFn) {
                                        tasks.sort(taskSorterFn);
                                    }
                                    // Otherwise match store order, Set is unordered
                                    else {
                                        tasks.sort((a, b) => taskStore.indexOf(a) - taskStore.indexOf(b));
                                    }

                                    return tasks.map(taskRecord => me.renderCard(taskRecord, columnRecord, swimlaneRecord));
                                })(),
                                syncOptions : {
                                    syncIdField      : 'task',
                                    releaseThreshold : me.isVirtualized ? 1000 : 0
                                }
                            }
                        ],
                        syncOptions : {
                            syncIdField : 'role'
                        }
                    }
                },
                syncOptions : {
                    syncIdField : 'role'
                }
            };

        // Chained by features
        me.populateColumn({
            columnRecord,
            swimlaneRecord,
            columnConfig,
            columns
        });

        // Supplied by app
        me.columnRenderer?.({
            columnRecord,
            swimlaneRecord,
            columnConfig
        });

        return columnConfig;
    }
}
Override.apply(TaskBoardBaseOverride);

https://bryntum.com/products/taskboard/docs/api/Core/mixin/Override
https://bryntum.com/products/taskboard/docs/api/TaskBoard/view/TaskBoardBase

You can also nightly build from the customer zone which will have this fix.