Premium support for our pure JavaScript UI components


Post by jjoshua »

Hello
We have encountered a bug when using the state transaction manager in a tree grid. If you collapse a parent row and then delete it, when you undo the action then the row and all its children are expanded when restored. However when you go to collapse the row you just restored, the icon toggles but the row does not actually collapse. See screen recording for better understanding...

Screen Recording 2022-10-28 at 10.32.32.mov
(2.34 MiB) Downloaded 33 times

Here is the code we used to modify your tree grid demo:

import { TreeGrid, GridRowModel, StateTrackingManager } from '../../build/grid.module.js?462681';
import shared from '../_shared/shared.module.js?462681';

class Gate extends GridRowModel {
    static get fields() {
        return [
            {
                name: 'capacity',
                type: 'number'
            },
            'domestic',
            'airline',
            'manager'
        ];
    }
}

// Transform a parent node to a leaf node when all its children are removed
Gate.convertEmptyParentToLeaf = true;

let tree = new TreeGrid({

selectionMode: {row: true, checkbox: {hideable: false}},
    appendTo: 'container',

features: {
    cellEdit: true,
    filter: true,
    rowReorder: true,
    stripe: true
},

loadMask: 'Loading tree data...',

columns: [
    { text: 'Id', field: 'id', width: 40, editor: false },
    { text: 'ParentIndex', field: 'parentIndex', width: 40, hidden: true },
    {
        text: 'Name',
        field: 'name',
        flex: 3,
        type: 'tree',
        touchConfig: { editor: false }
        // You can customize expand/collapse icons
        // expandIconCls   : 'b-fa b-fa-plus-square',
        // collapseIconCls : 'b-fa b-fa-minus-square'
    },
    { type: 'aggregate', text: 'Capacity', field: 'capacity', flex: 1 },
    { text: 'Domestic', field: 'domestic', flex: 1 },
    { text: 'Airline', field: 'airline', flex: 1 },
    {
        text: 'Responsible<br/>Manager',
        field: 'manager',
        width: 100,
        htmlEncodeHeaderText: false
    }
],

store: {
    modelClass: Gate,
    readUrl: 'data/kastrup-airport.json',
    autoLoad: true,
    stm: new StateTrackingManager({ disable: false, autoRecord: true })
},

tbar: [
    {
        type: 'button',
        ref: 'customButton',
        icon: 'b-fa-folder-open',
        pressedIcon: 'b-fa-plane',
        text: 'Use custom tree icons',
        toggleable: true,
        onToggle({ pressed }) {
            tree.store.readUrl =
                'data/' + (pressed ? 'ohare-airport.json' : 'kastrup-airport.json');
            tree.element.classList[pressed ? 'add' : 'remove']('ohare-airport');
            tree.store.load();
        }
    },
    {
        type: 'button',
        ref: 'expandAllButton',
        icon: 'b-fa b-fa-angle-double-down',
        text: 'Expand all',
        onAction: () => tree.expandAll()
    },
    {
        type: 'button',
        ref: 'collapseAllButton',
        icon: 'b-fa b-fa-angle-double-up',
        text: 'Collapse all',
        onAction: () => tree.collapseAll()
    },
    {
        type: 'button',
        text: 'Undo',
        onAction: () => {
            tree.store.stm.undo();
        }
    },
    {
        type: 'button',
        text: 'Redo',
        onAction: () => {
            tree.store.stm.redo();
        }
    }
]
});


tree.store.stm.enable();

Post by marcio »

Hey jjoshua,

Thanks for the report, I was able to reproduce it, created a ticket for it here https://github.com/bryntum/support/issues/5494

Best regards,
Márcio


Post by nickolay »

@jjoshua Hi, just FYI this issue has been resolved and merged to the sources. You can verify it in the next release or in the tomorrow nightly build.


Post Reply