Angular 6 - Add new row in AG Grid

Question

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">

maybe the grid refreshes when the reference changes try using this.person.cars = [...this.person.cars, emptyCar]; — Hassan Al Bourji
– Hassan Al Bourji, Commented Oct 4, 2018 at 12:56

un.spike · Accepted Answer · 2018-10-04 15:29:07Z

11

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});

edited Oct 4, 2018 at 15:29

answered Oct 4, 2018 at 15:22

un.spike

5,1533 gold badges23 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user9923760 Over a year ago

Using the gridApi in the viewmodel is the best practice / best way to work with ag-grid?

un.spike Over a year ago

using the gridApi is always the best - cuz you no need to worry about the flow of states and so on.

netotz Over a year ago

updateRowData is deprecated since AG Grid 23.1, now you should use applyTransaction

Jan Clemens Stoffregen · Accepted Answer · 2019-08-22 11:48:30Z

for angular:

set id for html - selector (#agGrid in this example):

<ag-grid-angular
  #agGrid 
  style="width: 650px; height: 500px;"
  class="ag-theme-balham"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
>
</ag-grid-angular>

and then define the viewchild with this id, import AgGridAngular like shown below, then you can use the ag-grid api in Angular

import {Component, OnInit, ViewChild} from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';

@Component({
  selector: 'app-angular-handsometable',
  templateUrl: './angular-handsometable.component.html',
  styleUrls: ['./angular-handsometable.component.scss']
})
export class AngularHandsometableComponent implements OnInit {
  @ViewChild('agGrid') agGrid: AgGridAngular;
  columnDefs = [
    {headerName: 'Make', field: 'make', sortable: true, filter: true, editable: true },
    {headerName: 'Model', field: 'model', sortable: true, filter: true, editable: true },
    {headerName: 'Price', field: 'price', sortable: true, filter: true, editable: true }
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 },
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];
  constructor() { }

  ngOnInit() {

  }

  save() {
    console.log( 'Save', this.rowData );
  }

  addRow() {
    this.agGrid.api.updateRowData({
      add: [{ make: '', model: '', price: 0 }]
    });
  }

}

alokstar · Accepted Answer · 2018-10-04 15:39:52Z

0

Make sure your rowData array is getting updated with the new object you added and if its getting updated and its just a question of updating the grid view, you can explicitly call the refresh API's of the grid. https://www.ag-grid.com/javascript-grid-api/#refresh

answered Oct 4, 2018 at 15:39

alokstar

4992 silver badges7 bronze badges

Comments

Sandip Jaiswal · Accepted Answer · 2018-10-04 12:57:39Z

-2

I visited ag-grid documentation and got rowData is simple array. If ag-grid not refreshing your dom then may be they want a fresh array. You can do like this:

this.person.cars = [this.person.cars.slice(0), yourNewCarObj];

answered Oct 4, 2018 at 12:57

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

2 Comments

user9923760 Over a year ago

It works but [this.person.cars.slice(0), yourNewCarObj]; doesn't work. So it does: var cars = this.person.cars.slice(0); cars.push(yourNewCarObj);

Sandip Jaiswal Over a year ago

I just assumed. If I will create a component for world then definitely i will make sure my component will render as much as fast. They just have good knowledge on changeDetection. This is the way you can develop a project or library that will run super fast.

Collectives™ on Stack Overflow

Angular 6 - Add new row in AG Grid

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related