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...
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();