Repeated Save Increases Image Size and Row Height in GridJsWorkbook

Issue Summary:

I am using GridJsWorkbook to load, merge, and save Excel files from the GridJs JSON structure. However, I am encountering an issue where image sizes and row heights increase with each save operation, even when no changes are made to those elements.


Steps to Reproduce:

  1. Load a workbook in GridJs.

  2. Perform any edit (even without modifying the image or row height).

  3. Save the workbook using the following backend code:


GridJsWorkbook wb = new GridJsWorkbook();

wb.mergeExcelFileFromJson(uid, p);

wb.saveToCacheWithFileName(uid, filename, password);

  1. On every subsequent save, the image grows in size and row height increases without user interaction with those properties.

Frontend JSON Sent:


var jsondata = {

sheetname: xs.sheet.data.name,

actrow: xs.sheet.data.selector.ri,

actcol: xs.sheet.data.selector.ci,

datas: xs.getUpdateDatas(),

};


Expected Result:

  • Images and row heights should remain unchanged if not explicitly resized by the user.

  • Only the modified content in xs.getUpdateDatas() should affect the workbook.


Actual Result:

  • Image dimensions grow incrementally on every save.

  • Row height also increases progressively, resulting in a distorted sheet layout.


@chirags

Cause

The issue you’re experiencing with the GridJsWorkbook, where image sizes and row heights increase with each save operation, is likely due to how the workbook handles image and row height properties during the save process. When you save the workbook, it may be re-evaluating or re-encoding these properties, leading to unintended changes.

Solution

To prevent the image sizes and row heights from increasing on each save, you should explicitly set the image and row height properties back to their original values after performing any edits. This ensures that even if the save operation modifies them, they will revert to the desired state.

Code

Here’s a sample code snippet that demonstrates how to reset the image size and row height after saving:

GridJsWorkbook wb = new GridJsWorkbook();
wb.mergeExcelFileFromJson(uid, p);

// Save the workbook
wb.saveToCacheWithFileName(uid, filename, password);

// Reset image size and row height
foreach (var image in wb.Images)
{
    image.Width = originalImageWidth; // Set to original width
    image.Height = originalImageHeight; // Set to original height
}

foreach (var row in wb.Rows)
{
    row.Height = originalRowHeight; // Set to original height
}

Make sure to store the original dimensions of the images and row heights before any modifications are made.

Next Steps

  1. Implement the above code to reset the image and row height properties after each save.
  2. Test the functionality to ensure that the issue is resolved.
  3. If the problem persists, check for any additional settings or configurations in the GridJsWorkbook that may affect image handling.

Please proceed with these steps, and let me know if you need further assistance!

  • If I manually set the row height and image size from the original file before saving, everything works fine — the layout remains consistent.

  • However, if I intentionally update the row height or image size via the frontend and then save the workbook, the values are automatically reset back to the original on save.

@chirags
Hello, please try updating to the latest version 25.7 and try again. We tested downloading an Excel file with images here, and the image size and row height do not change due to multiple downloads.If the problem persists, please let us know and it would be best to provide the relevant problem file.

@chirags
v25.7 nuget package.
If you use java version, you can update the pom version to v25.7
v25.7 client js

When an image/shape is clicked or resized, for example in the first sheet, you can type in console to watch the xs.getUpdateDatas()[0].images or xs.getUpdateDatas()[0].shapes, you can watch the shapes[index].width and shapes[index].height. It will not always change.