[REACT] StateProvider doesn't keep column sizes or page reload

[chuckn0rris]

Forum post

Demo attached.
If you move splitter and reload - position will be properly restored. If you resize column and reload - size won't be saved.
Works well in vanilla.

Bryntum-demo-2023-04-18-001.zip

[FlowIT-JIT]

@matsbryntse Would it be possible for you guys to commit to having this issue resolved for the next patch version of 5.3 ?

[matsbryntse]

Yes, we'll try our best!

[FlowIT-JIT]

Thanks a lot, @matsbryntse

[jsakalos]

I took the above sample for testing, changed the version of Bryntum libraries to 5.3.2 in package.json and started the app with npm i && npm start. Then I've deleted existing (probably stale) local storage and the columns' widths are restored on reload as expected. See the screencast:

[FlowIT-JIT]

@jsakalos Thank you for investigating.
I'm not entirely sure why the bug report started focusing on column widths since that was not what I reported. Perhaps to simplify things. But please see the original forum post. When we re-create Gantt (use the [Create new Gantt instance] button), customizations done to the order of columns are reverted - and possibly other view settings as well, I don't remember. I have just verified that the problem is still present with version 5.3.3.

[FlowIT-JIT]

I have attached a video demonstrating the problem with version 5.3.3.
Bryntum-2023-04-21-001.m4v.zip

[jsakalos]

Thanks for the info, I'll check that too.

[jsakalos]

@FlowIT-JIT, so I have finally cracked it. What's going on behind the scene is that columns configuration objects are converted to records for ColumnStore and their ids are auto-generated, if not provided. So when we reload the page, the column ids generation starts at zero. However, when we destroy and re-create the instance, the id generation continues from the previous instance, effectively unlinking the columns from the saved state.

The solution is simple: give your columns' configs ids, for example:

            "columns": [
                {
                    "text": "",
                    "type": "wbs",
                    "id":1
                },
                {
                    "type": "check",
                    "text": "Manuel",
                    "field": "manuallyScheduled",
                    "id":2
                },
                {
                    "type": "name",
                    "text": "Titel",
                    "field": "name",
                    "width": 350,
                    "id":3
                },

and it will work. I will also create a ticket to check whether we could improve the auto-generation of ids logic.

[isglass]

Replaced by #6646

[FlowIT-JIT]

@jsakalos Thank you so much for providing a fix 😊