Find out when a row has been edited by user - tabulator

Question

I need to know when a row edit ended, (this means when cell editor moved to another row or cell editor was hidden with any changes), to send edited data to service. I have cellEditing and cellEdited events, but sending data after each cellEdited is too expensive.
May be I can use, for example, cellEdited with some additional checks, but I can't figure out how. Or may be there is a better way to do it?

Answer 1

You can call the isEdited on a cell component to see if it has been edited in the past, so in the cellEdited callback you could cycle over the cells in the row to ses if they have all been edited:
dataEdited:function(cell){
var cells = cell.getRow().getCells();
var allEdited = true;
cells.forEach(function(cell){
if(!cell.isEdited()){
allEdited = false;
}
});
if(allEdited){
//do something when all cells have been edited
}
}
you can also cleare the edited flag on a cell using the 'clearEdited' function on the cell component, this could be useful to allow the user to edit again after you have performed whatever you need to after the row edit:
cell.clearEdited();

Answer 2

I found a temporary solution for now.
First of all, I'am catching cellEdited, store current cell and starting a timer. This needs to define, if some editor will shown after current one. If timer is completed, I realize that row edition is ended and do my job.
Then I'am catching cellEditing, to check if row editing is continued. If cellEdition is fired, check timer existence, if it is, stop the timer and check: if current cell is in row with last edited cell, if it is, do nothing (row editing continues), if it is not, do my job (last row edit ended).
Here is part of my Angular controller with code:
editTimerId?: any;
lastEditedCell: Tabulator.CellComponent;
cellEditCompleted(cell: Tabulator.CellComponent) {
this.lastEditedCell = cell;
this.editTimerId = setTimeout(() => this.timerComplete(), 2000);
}
timerComplete() {
// Do the thing
}
cellEditingBegin(cell: Tabulator.CellComponent) {
if (this.editTimerId) {
clearTimeout(this.editTimerId);
this.editTimerId = null;
let lastRow = this.lastEditedCell.getRow();
if (cell.getRow() !== lastRow) {
// Do the thing
}
}
}
I think this solution is too complicated, so if someone have a better way, I'll be glad to see it.