Search code examples
angulartypescriptag-grid

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"}

Solution

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