Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Get Updated Rows in Ag-grid

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"}
like image 877
xzk Avatar asked Oct 28 '25 04:10

xzk


1 Answers

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
 }
});
like image 150
Pranay Rana Avatar answered Oct 29 '25 19:10

Pranay Rana



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!