Integrating a Custom Dropdown Component in a Specific Column in SpreadJS Design

Integrating a Custom Dropdown Component in a Specific Column in SpreadJS Design

Posted by: mohd.shibyan on 9 August 2023, 5:38 am EST

• 

  mohd.shibyan

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 August 2023, 5:38 am EST

  Hello Community,

  I’m working on a project where I’m using SpreadJS with React, specifically the SpreadJS Designer component. I have a requirement to integrate a custom reusable dropdown component as a cell dropdown for a specific column in SpreadJS. While I’ve tried various approaches, I’m facing challenges in achieving this seamlessly.

  Has anyone successfully integrated a custom React dropdown component within a specific column in SpreadJS Designer? If so, could you provide a working example? If possible, testing it in a code interpreter or sandbox environment would be beneficial.

  Any guidance or reference would be greatly appreciated. Thank you in advance!

  Note: I know that SpreadJS provide a way to use cell dropdown(https://www.grapecity.com/spreadjs/demos/features/cells/drop-downs/list/react) but my requirement is to use a prebuilt dropdown react component as a cells dropdown for specific column or columns.

• 

  chandan.rawat

  

  • Post Options:
  • Link
    Copy

  Posted 10 August 2023, 8:39 am EST

  Hi,

  Please note that SpreadJS does not support react component as a custom cell type for a cell. It is important to note that React component is based on the React framework. Its life cycle is controlled by the framework and also the component template is compiled into a DOM element by the framework. But the cells or cell types in SpreadJS have their own defined life cycle.

  Alternatively, you could use the life cycle methods provided by SpreadJS cell type to create a custom dropdown cell type.

  Please refer to the below sample.

  Sample: https://jscodemine.grapecity.com/share/34hxWb22p0aRuoQUVQdfzA/?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 face any issues.

  Regards