Angular 5 - Ag grid add row

Question

I am trying to add a new row in "Ag grid".

I save it well in the database, the problem is that visually the row is added to the "Ag grid" but it display empty.

This is the code for the click event and to add the row.

this.gridOptions.api.updateRowData({ add: [form.form.value] });

This is the variable "gridOptions":

this.gridOptions = {
    context: { componentParent: this },
    defaultColDef: {
        resizable: true,
    },
    rowSelection: 'multiple'
};

The object "form.form.value" contains the following:

{CodPersona: "001", Nombre: "John", Descripcion: "John", Fecha: "2020-04-07"}

This is the html code of the "Ag grid":

<ag-grid-angular class="ag-theme-material"
   [rowData]="rowData"
   [columnDefs]="columnDefs"
   [gridOptions]="gridOptions"
></ag-grid-angular>

The database table contains the following fields:

IdPersona, CodPersona, Nombre, Descripcion, Fecha

This is a screenshot of the result in the browser:

NOTE: rowData I load it in the event "ngInit" using a service, thanks.

Can you provide more details about your solution (more code or even full example via stackblitz or plinker), would be simpler to check and help — un.spike
The solution is to customize the type of object that passed to updateRowData (row), it was passing, "form.form.value" which is an object of type NgForm, thanks — Eladerezador

Sharanya Sharanya · Accepted Answer · 2020-04-07T15:12:09

I am assuming you have set the form as an observable.

In this case, in the onGridReady function, try to set the row data with setRowData(form_local_variable). This should solve your issue.

Will be good if you can share a demo link for the issue.