(Ag-Grid) While editing, how to get value changed immediately, not after cell loses focus?

Question

In ag-grid, while entering some values in table, I need to receive updated values on input or change event.

But onCellValueChanged is triggered only when cell loses focus, and I cannot figure out what is the way to get values immediately. The only restriction I have - I can't add custom cellEditor, it needs to be grid default.

Can someone, please, advise how to reach such behavior?

Answer 1

You can get the current value of the cell whilst editing by leveraging the Grid Event onCellKeyDown:

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

var gridOptions = {
    onCellKeyDown: params => {
        console.log('current value', params.event.target.value)
    },
}

Please see this sample which showcases this: https://plnkr.co/edit/GbMglD1fxTTeSZFj

Answer 2

According to ag-grid you can use a custom callback onCellEditingStopped.

This will trigger every time a cell editing is ended.

You define it directly on the grid options object and you can also access the edited values (and its row and column) like this:

const gridOptions = {
  columnDefs: [/* whatever */],
  defaultColDef: {/* whatever */},
  rowData: rowData,
  onCellEditingStopped: function(event) {
    console.log(event);
    console.log(event.oldValue); // cell's previous value
    console.log(event.newValue); // cell's new value
    console.log(event.column); // the column that was edited
    console.log(event.data); // the row that was edited
  },
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);
});

Here you have a detailed explanation of whenever this onCellEditingStopped is triggered.

You can also inspect the full example.