Strategy for Separately Saving and Reloading Styles in SpreadJS

Strategy for Separately Saving and Reloading Styles in SpreadJS

Posted by: clingam on 29 August 2024, 7:07 pm EST

• 

  clingam

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 August 2024, 7:07 pm EST

  Hello SpreadJS Community,

  In my current project involving SpreadJS, users have the capability to apply customized styles to the data presented within the sheets. A critical requirement for us is to not only save the content but explicitly and separately save the styles applied to different cells or ranges. These styles need to be stored in a unique location, distinct from where the data itself is stored.

  Could anyone advise if there is a way to extract just the styles applied to the sheet in JSON format? Furthermore, I’m looking for the most effective method to reapply these styles when the sheet is reloaded.

  I would greatly appreciate any guidance, examples, or pointers to relevant documentation on how to implement this feature.

  Thank you for your help!

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 30 August 2024, 6:03 am EST - Updated 30 August 2024, 6:08 am EST

  Hi,

  Based on my understanding, you want to save the sheet’s style separately and load it later.
  
  This feature is not directly supported, but as a workaround, you can create a clone of the sheet, remove the data, and save it as a JSON file. You can then store this file wherever you like, and when you need to reload the style, you can load the saved JSON file to restore the style. Refer to the attached snippet, gif “Steps.gif,” and sample for guidance.

  document.getElementById("save").addEventListener("click", (e) => {
      const json = spread.getActiveSheet().toJSON();
  
      const tempWorkBook = new GC.Spread.Sheets.Workbook();
      let tempSheet = tempWorkBook.getActiveSheet();
      tempSheet.fromJSON(json);
  
      // Clear data 
      tempSheet.clear(-1, -1, -1, -1, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.StorageType.data);
  
      // Export spread to xlsx, ssjson, csv file.
      tempWorkBook.export(function (blob) {
          // Save blob to a file
          saveAs(blob, "Example.ssjson");
      }, function (e) {
          console.log(e);
      }, {
          fileType: GC.Spread.Sheets.FileType.ssjson
      });
  });
  
  document.getElementById("open").addEventListener("click", (e) => {
      const file = document.getElementById("file").files[0];
  
      if (!file) {
          console.log("Select File!!");
          return;
      }
  
      const tempWorkBook = new GC.Spread.Sheets.Workbook();
  
      // Import the xlsx, ssjson, csv file to spread.
      tempWorkBook.import(file, function () {
          // Success callback to do something
          let styleSheetJSON = tempWorkBook.getActiveSheet().toJSON();
          let activeSheet = spread.getActiveSheet();
  
          activeSheet.fromJSON(styleSheetJSON);
      }, function (e) {
          console.log(e); // Error callback
      }, {
          fileType: GC.Spread.Sheets.FileType.ssjson
      });
  });

  GIF:

  Sample: https://jscodemine.mescius.io/share/gwnxq7E6bU25mPcqY2_Urw/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"%2C"%2Fpackage.json"%2C"%2Fsrc%2Fstyle.css"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  Regards,
  
  Priyam

• 

  clingam

  • Post Options:
  • Link
    Copy

  Posted 5 September 2024, 2:24 pm EST

  Hi Priyam,

  Thank you for your helpful response and the detailed guidance. I have one additional functionality that I need assistance with.

  In my current implementation, I am loading data into the sheet from JSON objects using the following code snippet:

  let sheet = spread.getActiveSheet();
  sheet.bindColumns(columnSchema);
  sheet.setDataSource(data);

  Here, columnSchema contains the header information to be displayed, and the actual data for the sheet is available in the data object.

  My question is: when reloading the sheet, how can I ensure that both the data (from the data object) and the styles (which were saved separately using the approach you mentioned) are applied correctly? I would like the sheet to reflect both the data and the previously saved styles seamlessly.

  Any guidance on how to merge or manage these two aspects (data and styles) when loading the sheet would be much appreciated!

  Thank you for your continued support.

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 6 September 2024, 7:59 am EST - Updated 6 September 2024, 8:04 am EST

  Hi,

  You can save the style and data separately, and when reloading, first apply the saved style using the fromJSON method with the style JSON. Then, retrieve the data and reapply it to the sheet using the setDataSource method. Please refer to the attached “Steps.gif” and the provided sample.

  

  Sample: https://jscodemine.mescius.io/share/fyRQ4TyTMk2qnxxyLm3Cng/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"]%2C"ActiveFile"%3A"%2Findex.html"}

  In the sample, I have saved the data and style in localStorage, but you can save them anywhere as per your requirement.

  Regards,
  
  Priyam