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

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.

Answers:

Answer

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

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.