Example code in TypeScript:
import React, { ReactElement, useRef } from 'react';
import { BryntumGrid } from '@bryntum/grid-react';
interface TreeNode {
id: number,
username: string,
children?: TreeNode[],
}
class TreeDataGenerator {
nodes: [];
idCount: number;
numberOfUsers: number;
levels: number;
constructor (numberOfUsers = 10, levels = 3) {
this.nodes = [];
this.idCount = 1;
this.numberOfUsers = numberOfUsers;
this.levels = levels;
}
private isEven (value: number): boolean {
return value % 2 === 0;
}
public generateData (treeData = []): TreeNode[] {
this.levels--;
for (let i = 0; i < this.numberOfUsers; i++) {
const node: TreeNode = {
id: this.idCount,
username: `User ${this.idCount}`,
};
if (this.levels) {
node.children = [];
}
treeData.push(node);
this.idCount++;
if (this.levels && this.isEven(this.numberOfUsers)) {
this.generateData(node.children);
}
}
return treeData;
}
}
const MyGrid = (): ReactElement => {
const grid = useRef(null);
function expandAll (): void {
grid.current.gridInstance.expandAll();
}
function collapseAll (): void {
const gridInstance = grid.current.gridInstance;
const store = gridInstance.store;
store.traverse((record: any) => {
if (record.isExpanded(store)) {
gridInstance.collapse(record);
}
});
}
const generator = new TreeDataGenerator();
return (
<>
<button onClick={expandAll}>Expand all</button>
<button onClick={collapseAll}>Collapse all</button>
<BryntumGrid
ref={grid}
treeFeature
height={400}
data={generator.generateData()}
columns={[
{ field: 'id', text: 'Id', type: 'tree' },
{ field: 'username', text: 'Username' },
]}
/>
</>
);
};
export default MyGrid;
Steps to reproduce:
- Click on "Expand all".
- Scroll to bottom of TreeGrid.
- Click on "Collapse all".
- Scroll up and notice the error messages:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')
at RowManager.getOffsetHeight (grid.umd.js?0469:108654)
at RowManager.displayRecordAtTop (grid.umd.js?0469:109367)
at RowManager.renderFromRow (grid.umd.js?0469:108949)
at RowManager.refresh (grid.umd.js?0469:109032)
at Grid.onStoreRemove (grid.umd.js?0469:112604)
at Store.trigger (grid.umd.js?0469:45991)
at Store.internalToggleTreeSubRecords (grid.umd.js?0469:15519)
at Store.onNodeCollapse (grid.umd.js?0469:15635)
at Store.toggleCollapse (grid.umd.js?0469:15594)
at Tree.toggleCollapse (grid.umd.js?0469:103696)