Custom column editor as own custom react component

Custom column editor as own custom react component

Posted by: marek.bujdoso on 17 November 2022, 12:11 am EST

• 

  marek.bujdoso

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 17 November 2022, 12:11 am EST

  I’m searching for the correct usage of a custom editor with a custom react component. If you have already some examples or links to other blog topics, please provide them.
  
  In our code, we use activateEditor() to trigger a custom event that opens our custom component but at the time of activation (after some key is pressed) I lose the pressed key.
  
  Example: We open our custom writable select component in one column to edit the value. When the user starts to write “Revenue” it will write “R” and opens our select component, focus, and write “evenue”.
  
  I’m not sure if it was implemented correctly, so I investigated a lot, but I found some solutions with

  createEditorElement

  but our select component has a lot of other functionality …

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 17 November 2022, 2:48 pm EST

  Hi,

  The createEditor has a return Type as HTMLElement if you are trying to render any custom HTMLElement you need to make sure that you do not return and react component from createEditorElement.

  Please refer to the following sample which implements some custom CellTypes.

  Demo: https://www.grapecity.com/spreadjs/demos/features/cells/cell-types/custom/purejs

  custom range Calender CellType: https://codesandbox.io/s/range-calendar-celltype-forked-73fsl?file=/src/index.js:245-269

  Also if you want to handle key down you need to use the is ReservedKey and return for that specific key down(after handling the key down). for example if you want to handle the ctr+a you could use the following code snippet.

  [code]customCellType.protytype.isReservedKey= (e,args){
  
  if(!args.isEditing && e.key==“a”&&e.ctrlKey){
  
  //handle here

  return true
  
  }
  
  }[/code]

  API: https://www.grapecity.com/spreadjs/api/classes/GC.Spread.Sheets.CellTypes.Text#isreservedkey

  regards,
  
  Avinash

• 

  marek.bujdoso

  • Post Options:
  • Link
    Copy

  Posted 18 November 2022, 3:07 am EST

  Thank you for examples.

  regards,

  Marek