"grid.save()" returns wrong grid representation (nested and changed column count)

[adiessl]

Subject of the issue

When using grid.save() after particular changes, the grid representation that gets returned is incorrect.

Your environment

• version of gridstack.js: 9.3.0
• which browser/OS: Windows 11, Google Chrome 117

Steps to reproduce

https://jsfiddle.net/vs81frby/

This Fiddle contains two grids, each one having two columns. The grids use the same options:

var options = {
  disableOneColumnMode: true,
  column: 2,
  row: 5,
  cellHeight: "50px",
  acceptWidgets: true,
  float: true
};

The grid on the right contains two items initially, labeled A and B. B is dragged to the left grid to position x: 1, y: 2. Item A is then resized to span the whole width of the right grid, thus having w: 2. It is then also moved to the left grid to position x: 0, y: 4. grid.save() returns x: 1, y: 2 in this case, however (the width returned is still correct: w: 2). A is then resized to be one column wide again – grid.save() incorrectly returns w: 6 now. Moving A to the top left position in the left grid should see grid.save() returning x: 0, y: 0, but it returns x: 1, y: -2.

The following GIF shows this behavior as well:

Expected behavior

x, y, w and h should reflect the real values.

This might only be a bug in the grid.save() method, as the attributes gs-x, gs-y and gs-w on the actual DOM nodes do have the correct values.

[adumesny]

looks like #2394 but that was addressed, so maybe not the correct fix then...

[adiessl]

Quick update: the problem is still present in version 9.5.0.

Another, potentially related issue (that might help in diagnosing the cause of this issue?) can be seen in the following fiddle: https://jsfiddle.net/4Lpum5f2/

The left grid has two columns, the right three. If an item spanning three columns is dragged to the grid spanning two columns, its w property still has the value 3, while its gs-w attribute has the correct value 2. When moving this item back to the grid with three columns, it spans two columns and its w property also has value 2 now.

Finally, for everyone coming across this problem, there is the following workaround: as the gs-* attributes apparently have the correct values, the saveCB callback parameter of grid.save can be used to manipulate the widgets before they get returned. As the current node is also passed in, it can be used directly to get the attribute values via node.el.

This callback is not documented here, however ...:
https://github.com/gridstack/gridstack.js/tree/master/doc#savesavecontent--true-savegridopt--false-gridstackwidget--gridstackoptions

... but it can be seen in the source code:

gridstack.js/src/gridstack.ts

Line 597 in 599965a

public save(saveContent = true, saveGridOpt = false, saveCB = GridStack.saveCB): GridStackWidget[] | GridStackOptions {

[adumesny]

my guess has to do with having higher column count for nested grid using that instead of the current column count displayed.