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"}
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
 }
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With