Version of the SpreadJS component takes 10 secs to render/load ...seems slow

Version of the SpreadJS component takes 10 secs to render/load ...seems slow

Posted by: georgeg on 25 February 2025, 5:47 pm EST

• 

  georgeg

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 25 February 2025, 5:47 pm EST - Updated 25 February 2025, 5:53 pm EST

  Hi. I am new to your product and am currently evaluating your product to adapt to our Pipkins Work Force Network product. I was wondering why it is taking 10 seconds to load the SpreadJS spreadsheet component? What can I do to make this sheet load faster. I am still learning so probably there is a better approach to what I want to do.

  What I am trying to test is progressively bigger loads from an API or database into the grid using a simulated JSON array of objects with several parameters, and formatting a header. Seems like if I do it like this for this small amount of data it takes a surprisingly long time to load the SpreadJS.

  Was wondering if there is a method of doing this and getting the data to load quicker?

  I have attached my code for you to play with and inspect, and hopefully there is something I could improve on to get the data to load faster.

  

  957×659 51.2 KB

  SpreadJSFormatTest.zip

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 26 February 2025, 6:31 am EST

  Hi,

  Thanks for sharing the code sample. We can replicate the issue you mentioned on our end. However, it is because you are entering values in many SpreadJS cells and also changing the size of the rows, columns, and the SpreadJS as required due to which the canvas is painted again and again on the UI causing a delay of around 5 to 10 seconds.

  To resolve this issue, we recommend you suspend the SpreadJS paint service and resume it once all the manipulations in the Spreadsheet are completed. Please refer to the attached sample at the bottom that illustrates the same.

  You can further refer to the Best Practices: https://developer.mescius.com/spreadjs/docs/BestPractices recommended while working with SpreadJS.

  While handling the paint events will enhance the performance of the SpreadJS, however, the loading can be further optimized by setting the values as an array using the setArray: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#setarray method and applying the style: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.CellRange#setstyle to the range of cells instead of individual cells of the Worksheet. The same is demonstrated in the attached sample.

  Sample: SpreadJSFormatTest.zip

  Please feel free to reach out if you encounter any further issues or require additional guidance.

  Best Regards,

• 

  georgeg

  • Post Options:
  • Link
    Copy

  Posted 13 March 2025, 1:07 pm EST

  Yes this works great. Placing the suspendPaint with suspendEvent and resumeEvent and resumePaint seems to work great.
  
  Thanks,
  
  George