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
}
});