Ag-grid React: how can i save new value when i press Escape?

Question

Ag-grid React I need to save the value of my input when pressing the escape key, but I don't know how to do it in ag -grid.

When i press Enter - i can save new value, But with Esc - i cant, it just discard the changes Where and how can I change this behavior?

Answer 1

To do this you'll have to implement your own Custom Editor Component, and inside there you can add logic to listen to the keyPresses inside the input element, and save the value before telling the Grid to stop editing.

Please see this implemented in the following plunkr

First, implement suppressKeyboardEvent to tell the grid to ignore the escape key:

Documentation on Suppressing Keyboard Events

            {
                field: 'number',
                suppressKeyboardEvent: ({ editing, event }) =>
                    event.code === KEY_ESCAPE && editing,
                cellEditor: DoublingEditor,
                editable: true,
                width: 300,
            }

Then, inside the custom editor component, you can add a grid event listener to listen to when keys are pressed (you can also use the browser default keydown):

        useEffect(() => {
            props.api.addEventListener('cellKeyDown', onKeyDown);
            return () => {
                props.api.removeEventListener('cellKeyDown', onKeyDown);
            };
        }, [onKeyDown]);

And finally, inside the listener, check if the escape key is pressed and stop editing the cell if it is:

        const onKeyDown = (params) => {
            if (params.event.code === KEY_ESCAPE) {
                params.api.stopEditing();
            }
        };