Base template options

Base template options

Posted by: alexei.snisarenko on 30 November 2021, 4:37 pm EST

• 

  alexei.snisarenko

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 30 November 2021, 4:37 pm EST

  We have a two templates for the spreadsheet created in spreadjs designer.

  Both templates have common styling parts (like column widths, row heights, conditional styling like color depending on value of the specific cell of the template).
  
  Other parts of the templates are separate.

  In the described use case whenever I want to update, say, column widths, I have to go to both templates and do the update.

  What could be the options so that I could update columns widths once and have the update be consumed by both templates?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 1 December 2021, 8:49 am EST

  Hi Alexei,

  In this case, you may define a custom component lets say CommonDialogComponent and then use that component in both the dialogs to have the same styles. Please refer to the following docs:
  
  https://www.grapecity.com/spreadjs/docs/v14/online/add-custom-component.html

  Regards
  
  Sharad

• 

  alexei.snisarenko

  • Post Options:
  • Link
    Copy

  Posted 1 December 2021, 10:35 am EST - Updated 3 October 2022, 9:31 am EST

  Hi Sharad,

  Following your suggestion how the two table templates (attached as image and ssjson files) would consume common properties such as column width, row height with the custom designer component?

  Ideally I would like to not go to spreadjs designer to update both templates attached but rather have a separate ssjson template (like common_styles.ssjson) “defining” all the styling and then have the attached ssjson templates to refer to this common_styles.ssjson like you would do in modern programming languages (include, import, require etc.)

  

  1145×282 18.5 KB

  

  1144×225 18 KB

  Alexei

• 

  alexei.snisarenko

  • Post Options:
  • Link
    Copy

  Posted 1 December 2021, 10:36 am EST

  Attaching ssjson samples to the reply above as zip archive

  ssjson.zip

• 

  alexei.snisarenko

  • Post Options:
  • Link
    Copy

  Posted 1 December 2021, 11:33 am EST

  Would the range template be more suited for my case?

• 

  alexei.snisarenko

  • Post Options:
  • Link
    Copy

  Posted 1 December 2021, 12:39 pm EST

  I thought of two other options and wondering what would be you thoughts on that.

  1. Would you recommend to apply SASS alike (similar to SASS with CSS) tool for pre-processing the ssjson file?

  2. May be there is other way to get column widths, row heights, fonts, colors, borders widths from parameters which will be accessible at design time in spreadjs designer and in runtime they could be provided through some workbook/worksheet api call?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 2 December 2021, 8:27 am EST

  Hi Alexei,

  I’m sorry but I misunderstood the requirement. I thought you need to share styles between two dialogs of the designer.

  Would the range template be more suited for my case?
  
  RangeTemplate isn’t suited for these scenarios. Also rangetemplate won’t work for two different workbooks so we would get back to our original requirement of sharing styles(column width, fonts, heights etc)

  I thought of two other options and wondering what would be you thoughts on that.
  
  Both of these options are good solutions, you may opt for any of these. Let me list pros and cons between the two:
  
  • Pre-processing:
  
  → Pros:
  
  • loading workbooks would be faster since we don’t need to apply styles after loading the JSON. If there are only a few changes which needs to be done then loading time difference won’t be noticible.
  
  → Cons:
  
  • You need to make sure that generated JSON after preprocessing is in the correct schema. SpreadJS won’t load the JSON file if provided JSON is invalid.

  • Update styles after loading JSON
  
  Pros:
  
  → Easy to use API
  
  → It is possible to update styles conditionally
  
  → No need to validate JSON, as API calls guarantee that JSON schema is maintained
  
  Cons:
  
  → For large updates, it might introduce additional overhead

  I would recommend you to go with the second option. You may refer to the API docs here:
  
  https://www.grapecity.com/spreadjs/docs/v14/online/API_documentation.html
  
  Demo for style updates: https://www.grapecity.com/spreadjs/demos/features/cells/basic-style/purejs

  Please feel free to reach out if you face any issues during implementation.

  Regards
  
  Sharad