Angular 6 - Add new row in AG Grid
Solution 1
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.
gridApi.updateRowData({add: newRows});
Solution 2
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 }]
});
}
}
Related videos on Youtube
user9923760
Updated on June 04, 2022Comments
-
user9923760 about 2 years
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">
-
user9923760 over 5 yearsIt 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 5 yearsI 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.
-
user9923760 over 5 yearsUsing the gridApi in the viewmodel is the best practice / best way to work with ag-grid?
-
un.spike over 5 yearsusing the
gridApi
is always the best - cuz you no need to worry about the flow of states and so on.