Stop tabbing to next row in AG-Grid when adding a new row of data

Question

I have an AG grid (in my Angular 6 app) and I'd like to do the following:

• have a button to add a new, empty row at the top of the grid
• put that new row into cell editing mode (with editMode="fullRow") right away
• allow the user to fill in values into the various columns of the row
• once the row is completed (e.g. when the next tab would jump to the next row), I want to be able to grab the values, validate them, and if valid, add them to my collection of data

I can do steps 1-3 (add a new empty row, start editing right away, user enters data) just fine - but I can't seem to find any way to stop the tab on the last cell to just jump to the next row's first column. I need to be able to somehow prevent the tabbing to leave the first row - tab on the last cell should trigger some event to validate the row data entered by the user, and either save that data (if valid), or display an error and highlight the problematic cell(s) without leaving the newly added row.

How can I do that? Any ideas?

Answer 1

You can probably do your last step by providing a custom tabToNextCell callback:

https://www.ag-grid.com/javascript-grid-keyboard-navigation/#tabtonextcell

There's some sample code on that page, inside the "Example Custom Navigation" demo (the Angular/React versions of that demo are superficially broken, check the JavaScript version).