I'm trying to add a tree column dynamically by accessing the ColumnStore and executing a "columns.insert(index, records)". But the tree carets don't expand correctly, and also I am getting this error in the console whenever I try to expand a record:
grid.umd.js?0469:111800 Uncaught (in promise) TypeError: Cannot read property 'id' of undefined
at Tree._callee$ (webpack-internal:///./node_modules/@bryntum/grid/grid.umd.js:111795)
at tryCatch (webpack-internal:///./node_modules/@bryntum/grid/grid.umd.js:148416)
at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/@bryntum/grid/grid.umd.js:148646)
at Generator.eval [as next] (webpack-internal:///./node_modules/@bryntum/grid/grid.umd.js:148471)
at asyncGeneratorStep (webpack-internal:///./node_modules/@bryntum/grid/grid.umd.js:131285)
at _next (webpack-internal:///./node_modules/@bryntum/grid/grid.umd.js:131307)
This is my test case (in TypeScript):
import React, { useState, useEffect, useRef, ReactElement } from 'react';
import { BryntumGrid } from '@bryntum/grid-react';
const Prototyping = (): ReactElement => {
const [customGridData, setCustomGridData] = useState([]);
const userGridRef = useRef(null);
useEffect(() => {
setCustomGridData([
{
id: 123,
username: 'User123',
children: [
{
id: 124,
username: 'User124',
},
{
id: 125,
username: 'User125',
},
{
id: 126,
username: 'User126',
},
],
},
{
id: 127,
username: 'User127',
},
{
id: 128,
username: 'User128',
},
{
id: 129,
username: 'User129',
},
{
id: 130,
username: 'User130',
},
]);
}, []);
useEffect(() => {
// Dynamically insert a tree column
userGridRef.current.gridInstance.columns.insert(0, {
type: 'tree',
field: 'username',
text: 'Username',
flex: 1,
editor: false,
});
}, []);
const customGridConfig = {
data: customGridData,
treeFeature: true,
autoHeight: true,
columns: [
{
field: 'id',
text: 'User ID',
flex: 1,
},
],
};
return (
<BryntumGrid ref={userGridRef} {...customGridConfig} />
);
};
export default Prototyping;
Why isn't this working?