I want to find out which row has edited In Ag-Grid?

5.6k Views Asked by At

I want to find out which row has edited In Ag-Grid? I want to save only those rows which are edited? so is there any method so that i can find out which row has edited?

2

There are 2 best solutions below

1
On BEST ANSWER

You can use onCellEditingStopped() event for ag-grid.

html

<ag-grid-angular
    ...
    (cellEditingStopped)="onCellEditingStopped($event)"
    ...
    ></ag-grid-angular>

ts

onCellEditingStopped(e) {
    console.log(e.rowIndex);
}
1
On

global save button ? not related with a node (row)

yes. correct

Ok, on this case you need to track as an example via Id what data is new. So, let's say on your data you have unique identifier - which will represent Primary key or something like that - and this key should be handled on back-end or database side.

Now, to get only 'new' nodes, you can filter grid-data like that:

   let newData = [];
   this.gridApi.forEachNode(node=>{
       if(!node.data.id)
           newData.push(node.data)
   })

But I'm recommending to avoid multiple insert and handle each creation separately like that :

handleInsert():void{
    let yourDataModel = {
        ...
    }
    this.sampleApiService.sampleRequest(dataModel).subscribe(result => {
        this.gridApi.updateRowData({add:[result], addIndex:0});
    })
}

result - should return modified dataModel with already defined Id

In this case, you will be able to update grid-data and be sure that data is correct and already inserted into your storage.

Update added example for update

Instead of (cellEditingStopped) event you can also use valueSetter for tracking cell updates

handleUpdateValue(params: ValueSetterParams){
    // see if values are different if you have a complex object,
    // it would be more complicated to do this.
    if (params.oldValue!==params.newValue) {
        // params.colDef.field - updated cell ID
        ... handle update logic here - call API and so on ...
        // get grid to refresh the cell
        return true;
    } else {
        // no change, so no refresh needed
        return false;
    }
}