About customizing panels and determining whether a workbook has been edited!

About customizing panels and determining whether a workbook has been edited!

Posted by: nguyenvu.work on 11 September 2023, 3:18 pm EST

• 

  nguyenvu.work

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 September 2023, 3:18 pm EST - Updated 11 January 2024, 5:40 am EST

  Hi! I am using Spread Designer with React.
  
  I want to display a panel containing my React component. Can I achieve this without direct DOM manipulation? Additionally, how can I position the panel to the left or right?
  
  In another scenario, I need to determine whether a workbook has been modified by the user. This includes changes to data, formatting, styles, and any other alterations. While I’m aware of the “isDirty” method, it doesn’t seem to fulfill my requirements. Are there alternative solutions for this situation?
  
  Thank you!

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  Posted 12 September 2023, 8:36 pm EST

  Hi,

  Please refer to below answers to your questions.

  1. As per my understanding, you want to add a side panel inside the SpreadJS Designer.

  For the above use case, you can create a custom component and show that component in the side panel.

  First, you would need to create a custom component and register that custom component with GC.Spread.Sheets.Designer.Designer.RegisterComponent() method. You can create the elements of the custom component based on your requirements.

  In the second step, you need to create a template and register the template with GC.Spread.Sheets.Designer.registerTemplate() method. This template will contain the custom component.

  Lastly, you need to create a config for a custom side panel and insert this config into the side panel list of the designer config. This side config will refer to the custom template to show the view/UI in the side panel.

  Please refer to the attached sample for more understanding.

  sample: https://jscodemine.grapecity.com/share/FUlTdKJ0AEW2_6wDJkEjIg/?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.jsx"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.jsx"}

  If you want to show a side panel outside of the designer, you may refer to the below sample.

  sample: https://jscodemine.grapecity.com/share/rmZSk4gdM0enG5F9mqRKOw/?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.jsx"%2C"%2Fsrc%2Fpanel.jsx"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.jsx"}

  Additionally, you may also refer to the below sample if you want to show another spread inside the side panel within SpreadJS Designer.

  sample: https://jscodemine.grapecity.com/share/g6cq2JdNPU2-Q9WwQhktMw/?defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.jsx"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.jsx"}

  References:

  GC.Spread.Sheets.Designer.registerTemplate(): https://www.grapecity.com/spreadjs/api/v16/designer/modules/GC.Spread.Sheets.Designer#registertemplate

  Designer.RegisterComponent():
  
  https://www.grapecity.com/spreadjs/api/v16/designer/classes/GC.Spread.Sheets.Designer.Designer#registercomponent

  IDialogTemplate interface: https://www.grapecity.com/spreadjs/api/v16/designer/interfaces/GC.Spread.Sheets.Designer.IDialogTemplate

  2. When the cell is edited in the sheet, its status is marked as “dirty”. You can use the sheet.getDirtyCells() method to get all the cells that have been edited/changed. You can use the sheet.clearPendingChanges() method to remove the dirty status of changed cells. It is important to note that when you apply style or formatting from the Designer ribbon, the CellChanged event is not fired which informs about the style change.

  For this scenario, you can add an event listener to the command manager of spread using spread.addListener() method. The listener is invoked when the style or formatting is applied from the ribbon.

  Please refer to the attached sample for more understanding.

  sample: https://jscodemine.grapecity.com/share/kmdFoedoCESiLbwqDQyipA/?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.jsx"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.jsx"}

  Please let us know if you still face the issue. Also, please explain the use case in which you are facing the issue.

  References:

  sheet.getDirtyCells(): https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Worksheet#getdirtycells
  
  sheet.clearPendingChanges(): https://www.grapecity.com/spreadjs/api/v16/classes/GC.Spread.Sheets.Worksheet#clearpendingchanges

  Regards,
  
  Chandan