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.

Infestation

You may pass this in to undoFn(this) function and get the data in the .ts file and update the data and update the list of data shown. – Interstice

@BijayYadav - that button is not inline with all records, there is only 1 button that too, outside the Grid. – Infestation

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: '[phone]'
  },
  {
    id: 1,
    name: 'Another name',
    tel: '[phone]'
  }
];

Coranto

Your idea seems correct but one question, how to identify data for particular record/row – Infestation

What you meant by Array<YourInterface>? – Infestation

@Infestation I assume, that you get an Array of anything to display any entry as a row of this Array in a grid. Every entry is an Object and has a Model of the Objects, that you get from the backend or a JSON. If you do not have this Model, use any. Array<any> or any[]. – Coranto

yes I am getting an array of object exactly as you mentioned. Let me try it. – Infestation

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.

Viaduct

Sounds a good idea, is it possible you can present it with an example..? – Infestation