Angular 6 - Add new row in AG Grid

user9923760 picture user9923760 · Oct 4, 2018 · Viewed 10.9k times · Source

I want to add a new element in AG Grid. I have a following model:

export class PersonModel {
  cars: CarModel[];
}

The AG Grid has as rowData the array Cars of my model. But this array is not Observable. Now I want to add a new car when I click a button:

<button type="button" (click)="onClickCreateCar()">

And in my viewmodel:

  onClickCreateCar() {
    var emptyCar = new CarModel();
    this.person.cars.push(emptyCar);
  }

I can not see the new row in the grid because the array Cars is not observable. It is ok because the property of a model should not be observable. How do you fix the problem?

My AG-Grid definition:

<ag-grid-angular class="ag-theme-fresh" *ngIf="person" style="height: 100%; width: 100%;" [gridOptions]="gridOptions" [rowData]="person.cars" [columnDefs]="columnDefs">

Answer

un.spike picture un.spike · Oct 4, 2018

For insert a new row into ag-grid you shouldn't use the rowData directly it will create\override existing object and all states would be reset, and anyway, there is a method for it setRowData(rows)

But I'd recommend to use updateRowData(transaction):

updateRowData(transaction) Update row data into the grid. Pass a transaction object with lists for add, remove and update.

As example:

gridApi.updateRowData({add: newRows});