Custom column editor as own custom react component

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

    • Post Options:
    • Link

    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

    but our select component has a lot of other functionality …

  • Posted 17 November 2022, 2:48 pm EST


    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.


    custom range Calender CellType:

    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






  • Posted 18 November 2022, 3:07 am EST

    Thank you for examples.



Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels