CODEWITHSUNDEEP
angulartypescriptag-grid
Olivia
Olivia

Reputation: 125

Ag-Grid edit data and sending to server

Ag-grid on angular able to create grid fetching data from local json file. On editing any row how to save that data and then send to server or possibly local json file ??

In short Ag-Grid how to save row data after edit and send to server on click of Submit button. Anyone if implemented this on Javascript please comment, will try to use that on angular

Please let me know if there is any other best option apart from ag-grid to implement this functionality

Upvotes: 5

Views: 6190

Answers (1)

wentjun
wentjun

Reputation: 42526

If you want to listen to specific changes to a particular row, you can make use of the onCellValueChanged, or onRowValueChanged event bindings when defining the ag-grid component on your component template.

 <ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
(onRowValueChanged) = onRowValueChanged($event)
>

and on your component.ts, the onRowValueChanged method will be fired every time you make any changes

 export class YourComponent {
 private gridApi;
 private gridColumnApi;
   .
   . 
 onRowValueChanged: function(event) {
   console.log(event) // access the entire event object
   console.log(event.data) // access and print the updated row data
   const gridData = this.getAllData();
   // api call to save data

}

getAllData() {
  let rowData = [];
  this.gridApi.forEachNode(node => rowData.push(node.data));
  return rowData;  
}

onGridReady(params) {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;
}

Upvotes: 7

Related Questions