Hi Bryntum team,
I'm currently in the middle of migrating our app from Bryntum v6 to v7 — and it's been a pretty painful journey so far. This particular bug cost us a lot of debugging time because it's very difficult to reproduce consistently. It only manifests under specific conditions (certain data volume, reduced row height, multiple collapsed groups restored on init), I almost pushed this into production before spotting the error in the console during final checks.
In v6, our group collapse/expand persistence worked flawlessly. After upgrading to v7.2.2, the same code path crashes during initialisation.
I've put together a minimal reproduction project (based on the official vue-3-vite/basic example) with demo data that reliably triggers the bug. The data structure mirrors our production setup.
Version
- Bryntum SchedulerPro: 7.2.2
- Framework: Vue 3 + Vite
Summary
TypeError: Cannot read properties of undefined (reading 'bottom') is thrown in RowManager.insert() when programmatically collapsing groups via features.group.toggleCollapse() after setting resourceStore.data.
Once the error is thrown, group collapsing/expanding stops working entirely. The scheduler gets into a broken state where clicking group headers no longer toggles them. The only way to recover is a full page reload and resetting the persisted data. From a user perspective, this means the scheduler becomes unusable until they clear their browser state.
Our Use Case
We persist the scheduler's UI state (collapsed groups, row height, sort order) and restore it when the user navigates back. This is a standard pattern — nothing exotic. On initialization:
- Scheduler is created and painted
resourceStore.datais populated with resources (89 across 7 groups)rowHeightis restored from persisted settings (e.g. 40px instead of default 50px)- Previously collapsed groups are restored by calling
features.group.toggleCollapse(groupId, true)for each persisted group
This worked in v6. In v7, it crashes.
Reproduction
A full reproduction project is attached.
npm install && npm run dev- Change row height to MIDDLE (40)
- Collapse "Keine Gruppe" (53 resources)
- Click "Navigate Away & Back" (simulates route navigation — destroys and re-creates the scheduler)
- Open the browser console — observe:
TypeError: Cannot read properties of undefined (reading 'bottom')
at RowManager.insert (schedulerpro.module.js)Workaround
The Grid base class defaults include transition: { toggleGroup: true }
Disabling the group toggle animation prevents the buggy RowManager.insert() path:
// In scheduler config:
transition: {
toggleGroup: false
}This removes the collapse/expand animation for all group toggles, which is acceptable as a temporary workaround but not ideal for UX. Also, this may just be a lucky shot that works for our current data setup — we can't guarantee it won't break with a different number of resources or groups.
Is there a recommended way to save and restore group collapse state? Should we be using a different API for this, or handling it at a different point in the scheduler lifecycle?
Also — would a Tree structure (with parent/child resource hierarchy) be better suited for our use case?
Any guidance would be greatly appreciated!
Thank you for looking into this. Happy to provide any additional information needed.
