Bryntum Support Forums

I want to implement on-demand loading like this demo: https://bryntum.com/examples/grid/treeloadondemand/

I'm using react to pass the resources data, but there are two issues in components.
When I passed children: true, the WalkHelper.preWalkWithParent will report slice undefined.
And there is no expand icon on grid.

I have to make these two changes in StoreSync.syncTreeDataset and WalkHelper.preWalkWithParent.

I'm not sure this is the way it should be fixed, but hopefully this will be fixed officially.

There are more issues in components that prevent me to implement on demand loading with react states.

Could you please upload a small test case showing the data you load to the tree component? That would help us find the root cause quickly.

There are more issues in components that prevent me to implement on demand loading with react states.

If you can open a new thread for each issue found, we'll look into each issue promptly!

I'm using react to pass the resources data, but there are two issues in components.
When I passed children: true, the WalkHelper.preWalkWithParent will report slice undefined.
And there is no expand icon on grid.

Reproduced, ticket opened: https://github.com/bryntum/support/issues/3987

If you can open a new thread for each issue found, we'll look into each issue promptly!

There are issues in TreeNode when children changed from true to [c1, c2, c3].
And the expand icon in grid will not be hidden when true becomes undefined.
I think all these issues logically belong to the same feature/ticket.

Reproduced, ticket opened: Resolved v4.3.6 #3987 StoreSync fails when using tree data with lazy loaded parent nodes

When is this new version will be released?

Hi htmg27fg,

We cannot provide the exact dates, but usually we do releases every 2-3 weeks.

I tested the newest v4.3.6, some issues still exists.

What I expected:
expand icon visible: children === true || isArray(children)
expand icon invisible: children === undefined

here is a simple test case:

const columns = [
  {field: 'name', type: 'tree', 'text': 'Name'}
]

export default function App() {
  const [data, setData] = useState<any[]>([])

  return <div style={{height: '100vh', display: 'flex', flexDirection: 'column'}}>
    <div>
      <ol>
        <li>Name not aligned(works in v4.3.5)</li>
        <li>"Root 2" missing expand icon in step 1</li>
        <li>`Expanded` property not working in step 2</li>
        <li>Root 2 missing expand icon in step 3</li>
      </ol>
      <button onClick={() => setData([])}>0.Before Load</button>
      <button onClick={() => setData([
        {
          id: '1',
          name: 'Root 1',
        },
        {
          id: '2',
          name: 'Root 2',
          children: true,
        },
        {
          id: '3',
          name: 'Root 3',
          children: [
            { name: 'Child 0' },
          ],
        }
      ])}>1.Loaded</button>
      <button onClick={() => setData([
        {
          id: '1',
          name: 'Root 1',
        },
        {
          id: '2',
          name: 'Root 2',
          expanded: true,
          children: [
            {name: 'Child 1'},
            {name: 'Child 2'},
          ],
        },
        {
          id: '3',
          name: 'Root 3',
          children: [
            { name: 'Child 0' },
          ],
        }
      ])}>2.Demand Loaded</button>
      <button onClick={() => setData([
        {
          id: '1',
          name: 'Root 1',
        },
        {
          id: '2',
          name: 'Root 2',
          expanded: false,
          children: []
        },
        {
          id: '3',
          name: 'Root 3',
          children: [
            { name: 'Child 0' },
          ],
        }
      ])}>3.Collapsed</button>
    </div>

<div style={{flex: 1}}>
  <BryntumGrid
    treeFeature={true}
    columns={columns}
    data={data}
  />
</div>
  </div>
}

Reproduced, ticket opened here: https://github.com/bryntum/support/issues/4028 thank you for report!