How to Get Updated Rows in Ag-grid

Question

Upon clicking "Insert New Row" button, below method is triggered and an empty new row is appended to current last row.

insertNewRow(){

    var newItem = this.createNewRowData();
    var res = this.gridOptions.api.updateRowData({add: [newItem]});

  }

createNewRowData(){
    var newData = [];
    //blah blah
    return newData;
  }

After I enriched the data on screen, how can I let the grid to pick up new rows (and probably all rows that have been changed since last DB retrieval)?

Note that I am able to click "Insert New Row" multiple times to create multiple rows before I hit Save button.

saveChanges(){
    var data = "HOW TO GET NEW ROWS AND UPDATED ROWS, AND STORE HERE??";
    this.myAppService.saveData(data).subscribe(
    //blah blah
    );
    console.log("Saved successfully to database");
  }

EDIT 1

Tried with storing previous records into a variable ("tableData"):

tableData: string[] = [];
currentData: string[] = [];

retrieveTableData (){
    //blah blah
    tableData loaded with an array of json
}

saveChanges(){
    this.gridOptions.api.forEachNode((rowNode) => {
      this.currentData.push(rowNode.data);
    });
    console.log(this.currentData);
    this.currentData.forEach(item => {
      console.log(item);
      if (!this.tableData.includes(item)){
      console.log("Updated Row: " + item);
      }
    });
  }

I guess there are some problems with data types etc.

Sample of console logging "tableData" and "currentData":

[object Object],[object Object],[object Object]

if I print out each item under either variable:

{FUND_CODE: "TEST1", PORT_CODE: "TEST1"}

Solution 1

Other way is keep flag in you object to identify its new/modified,

interface Item {
 //other properties
 newOrModified?: string;
}
_______________

items:Item[];
insertNewRow(){
    var newItem = this.createNewRowData();
    newItem.newOrModified="New";
    var res = this.gridOptions.api.updateRowData({add: [newItem]});
  }

onCellValueChanged(item: Item ) {
 item.newOrModified="Modified";
}

saveChanges(){
 cost modifieditems = this.items.filter(item=> item.newOrModified === "Modified" );
  cost newitems= this.items.filter(item=> item.newOrModified === "New" );
}

<ag-grid-angular style="width: 100%; height: 500px;"
         class="ag-fresh"
         [columnDefs]="columnDefs"
         [rowData]="items"
         (gridReady)="onGridReady($event)"
         (cellValueChanged)="onCellValueChanged($event)">
</ag-grid-angular>

---

you can do like this ,

//store your old records in one variable 
this.previousrecords = this.http.getAllRecords();
this.bindRecrods = [...this.previousrecords];//bind this to grid

//when saving records try like this 
this.bindRecrods.forEach(rec=> {
 if( !this.previousrecords.includes(rec) ){
   //insert or update record
 }
});

Solution 2

A bit late to answer this, but recently I faced the same issue and came up with an approach which helped me overcome this issue, so thought to share the same.

set: Set<string> = new Set<string>();

onCellValueChanged(params: any) {
  this.set.add(params.node.id);
}

onSubmit() {
  this.set.forEach( id => console.log(JSON.stringify(this.grid.api.getRowNode(id).data)));
  // call the api to update data
  // clear the set post update call
  this.set.clear();
}

Call the method onCellValueChanged, on the event cellValueChanged. Inside the method, add the row id of the row being edited to the set. While submitting the data, iterate through the set of edited row ids and get the row using grid api.

Comments

[xzk]

Either one is very 'javascript' way...actually I was looking for any built-in function / API in Ag-Grid which can handle this. Let me try out your suggestions though. Will get back.

[Pranay Rana]

@Henrix - i tried to look into api but not able to find method which can return you directly , i think you should drop mail to ag-grid team they can help , as its paid one

[xzk]

Thanks Phil. I think the difficult part in my original question is how to identify those changed / newly inserted rows since the last DB retrieval.

[xzk]

In the ag-gid official documentation, 'sickDays' is an existing column, and rowNode.setDataValue is used to set value to a column. I haven't found a 'built-in' attribute to identify changed/newly inserted rows, without explicitly declaring a column or field for identification purpose.

[xzk]

Hey, I am experimenting with your suggestion of storing old records in one variable. Somehow this.previousrecords.includes always return me FALSE. See my original post for more details.

[Pranay Rana]

@Henrix - if includes dont work then suggest you to make use of filter and perform logic of comparision ...but that is hard way i suggest to make use of other way where i added flag to monitor object newOrModified

[Phil]

And what is the problem with assigning a property that you don't make a column for? We did that too if I remember correctly. You have a set of defined columns in your Application and you have a set of properties. And depending on the grid (we have multiple grids in the app), we configure which columns should be displayed.