Angular Ag-Grid: Undo selected row changes on button click

Question

Application built on Angular and Javascript.

AG-Grid editable records having 1st column as Checkbox. After making any changes say on 5 records, after selecting checkbox for any particular record, on click of button Say <button name="Undo Changes" (click) = "undoFn()/>"

Need to undo the changes made, and reload the previous data for that particular records(row) only, not the entire grid.

Button is not inline with all records like a seperate column. There is only 1 button that too outside the Grid

Once again in short- Need To refresh only particular row whose checkbox has been checked, on click of Undo button present outside the Grid

Not finding solution to this anywhere.

Answer 1

I think I know you kind of problem. If you operate with a @Input or a property that will be set by a rest-call:

@Input() data: Array<YourInterface>;

or

public data: Array<YourInterface>;

...

public onInit() {
  httpClient.get(configuration).subscribe(data => {
    this.data = data;
  }
}

then using this data-property in you template directly is not useful, because, you are not able to determine the state of this data-property, before you modified it via the ui part of your app.

Instead of using it directly, do something like this:

public inputData: Array<YourInterface>;
@Input() data: Array<YourInterface>;

...

public onInit() {
  this.inputData = {...this.data};
}

or

public inputData: Array<YourInterface>;
public data: Array<YourInterface>;

...

public onInit(): void {
  httpClient.get(configuration).subscribe(data => {
    this.data = data;
    this.inputData = {...this.data};
  }
}

And use inputData in your template, instead of using data.

Then add a reset-method, that you can use to reset the data to the state before the manipulation with the ui (connecting this method to the reset button will reset all your rows).

resetData(): void {
  this.inputData = {...this.data};
}

After that use a method to persist your data.

saveData(): void {
  this.data = {...this.inputData};

  ...

  // more steps to persistence
  // make a http.post or emit this.data
}

EDIT: I assume, that you get an array of anything, every entry of this array is an object and has a model, to display it as table.

Interface:

interface YourInterface {
  id: number;
  name: string;
  tel: string;
}

Sample Data:

let data: Array<YourInterface> = [
  {
    id: 0,
    name: 'A name',
    tel: '+892383498239'
  },
  {
    id: 1,
    name: 'Another name',
    tel: '+23298238923'
  }
];

Answer 2

There are multiple events which ag-Grid provides on cell editing for you to utilize for example: by using which() method on the event would tell you that which cell is being targeted and you can create a map of an old value and new value with it. If the button is clicked you can check the rows and accordingly reset the values of the cell.