agGrid – detect when clicking outside an existing row

In agGrid’s documentation, they describe how you can add stopEditingWhenGridLosesFocus to "stop editing" a cell’s value, when the user clicks outside of the grid.

var gridOptions = {
  columnDefs: [
     . . .
  ],
  defaultColDef: {
     . . .
  },
  // this property tells grid to stop editing if the grid loses focus
  stopEditingWhenGridLosesFocus: true,
};

Taken from: https://www.ag-grid.com/javascript-grid-cell-editing

This works fine… but how do I detect if the user has stopped editing, but is still in the same row of data which they were editing before, or if they’ve clicked outside of this row ?

The problem I’ve having is when I have a blank grid, and I let the user add a new row.

I want the user to be able to click on an "Add new button", they see a new row in the grid, for them to enter all the values in that row, and, when they click outside of that row, I want to call my web service to save the values.

What is actually happening is that I add a new item to the rowData, the user can edit the values in that row… but I can never determine when they’ve clicked outside of that row, so I am never informed that it’s time to call my Save function.

If there’s already a row in the grid, then there’s no problem. The user can be editing the values in the new row, and when they’ve finished, they can click on the existing row, and the agGrid "onSelectionChanged" event kicks triggered.

But, if the only row in the grid is the new row… this event doesn’t ever get called.

The end result: the user can click on my "Add new row" button, but I can never save this new row for them (unless I do a save after each time they enter any value in any cell in that row, rather than waiting for them to enter all the values in the row and then save.)

The only solution I can think of is to add an ugly Save / Cancel button in a column in the agGrid.

But there must be a more user-friendly way than that…?

Source: Angular Questions