Updating and saving data in Ag-Grid with server communication

Question

Updating and saving data in Ag-Grid with server communication

Is it possible to create a grid using Ag-Grid on Angular that fetches data from a local JSON file? And how can the edited row data be saved and sent to the server or back to the local JSON file?

In summary, I would like to know how to save edited row data in Ag-Grid and send it to the server upon clicking the Submit button. If anyone has successfully implemented this functionality using JavaScript, please share your insights as I am looking to incorporate it into an Angular project.

If there are any alternative solutions besides using Ag-Grid for achieving this specific feature, I'd appreciate hearing about them as well.

angular typescript ag-grid

Answer 1

Answer №1

To monitor specific changes in a particular row, you can utilize the onCellValueChanged or onRowValueChanged event bindings when setting up the ag-grid component in your component template.

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

In your component.ts file, the onRowValueChanged method will trigger every time a change is made to the data.

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

}

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

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

Answer 2

To monitor specific changes in a particular row, you can utilize the onCellValueChanged or onRowValueChanged event bindings when setting up the ag-grid component in your component template.

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

In your component.ts file, the onRowValueChanged method will trigger every time a change is made to the data.

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

}

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

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

Updating and saving data in Ag-Grid with server communication

Answer №1

Similar questions

Having trouble launching myapp on the Android Studio emulator for Ionic 3

Using a click event to target the next div and apply a CSS class using Typescript

lines stay unbroken in angular

Activating the Play button to start streaming a link

What could be the reason for the ERROR message saying, "Cannot read property '0' of undefined"?

Encountering TypeScript error TS2345 while attempting to reject a Promise with an error

Is it feasible to pre-render an Angular2 view invisibly when hovering?

Error 404 occurs when attempting to retrieve a JSON file using Angular's HTTP

What is the best way to retrieve the instance of a different component?

Using Material UI date picker with TypeScript: A Complete Guide

Issue: Module compilation unsuccessful (from ./node_modules/css-loader/dist/cjs.js) during upgrade from Angular 11 to Angular 16

Generate an instance containing attributes that correspond to constant string values within a class

When attempting to asynchronously observe a datasource, the 'number' type cannot be assigned to the 'NgIterable<any>' type

When attempting to assign a 'string' type to the @Input property, I am receiving an error stating that it is not assignable to the 'PostCard Layout' type

Developing maintenance logic in Angular to control subsequent API requests

Query parameters in Angular 5 that have a global scope

Missing data list entries for next js server actions

Solve the issue of the __typename union

Tips for displaying both the time and date using Angular Material Date Picker

Ways to customize the placeholder for Material input fields in Angular 5