Premium support for our pure JavaScript UI components


Post by htmg27fg »

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.

Attachments
screenshot_2022-01-08_22-45-02.png
screenshot_2022-01-08_22-45-02.png (26.03 KiB) Viewed 1016 times
screenshot_2022-01-08_22-43-54.png
screenshot_2022-01-08_22-43-54.png (49.04 KiB) Viewed 1016 times

Post by htmg27fg »

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


Post by mats »

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!


Post by mats »

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


Post by htmg27fg »

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?


Post by alex.l »

Hi htmg27fg,

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

All the best,
Alex


Post by htmg27fg »

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>
}

Post by Maxim Gorkovsky »

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


Post Reply