(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?

Axiomatic

Mila, "receive and updated" means "receive and update" or "receive an updated"? Fix please this. Also you can highlight keywords by StackOverflow markup, like adding "`" around 'change' and other scripty-keywords. – Seamanlike

Was anyone able to solve this problem? I have the same question – Slain

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

Almost

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.

Illnatured

Unfortunately this event seems to fire fairly late - only when the cell's focus is lost – Marlow