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?
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 .
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.