Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to upgrade/refresh the ag-grid after row delete?

Tags:

I have an ag grid where i am trying to delete a row...I am able to remove the row from data source using "splice" technique,after that i want to refresh the table.But it is showing error.This is the code which i am using to delete a row

selectedvalue={} //this holds the selected row value
rowData=[]; //this holds all the row data
onRowSelected(event) {
  this.selectedvalue = event;
 }
deletebtn() {
    for (let i = 0; i < this.rowData.length; i++) {
        if (this.selectedvalue.node.data.make === this.rowData[i].make) {
            this.rowData.splice(i, 1);
            this.gridOptions.api.refreshView();
        }
    }
}

It is showing erroe something like this--> Cannot read property 'refreshView' of undefined...How can watch the changes made in table after row delete.

like image 471
Raja Reddy Avatar asked Feb 10 '16 09:02

Raja Reddy


People also ask

How do you refresh ag-grid cell?

Refresh Cells: api. refreshCells(cellRefreshParams) - Gets the grid to refresh all cells. Change detection will be used to refresh only cells whose display cell values are out of sync with the actual value. If using a cellRenderer with a refresh method, the refresh method will get called.


2 Answers

Edit: This solution is for version 3.3.x (updated plnkr link)

You should set the rows into the grid again: after your splice:

gridOptions.api.setRowData(gridOptions.rowData)

Maybe this plunkr helps https://plnkr.co/plunk/0k4sYa

The author of ag-grid explains this in the ag-grid forum The forum no longer exist

like image 139
Moises Sacal Avatar answered Sep 22 '22 12:09

Moises Sacal


There is a more efficient way described in the documentation : Transaction Update API.

You must use the method api.applyTransaction after the rows are deleted :

gridOptions.api.applyTransaction({ remove: [array of rows you have deleted]});

For example with just one row deleted :

gridOptions.api.applyTransaction({ remove: [this.rowData[i]]})

With this method, the grid will just update the rows in parameters and keeps all other view states (order, ...).

To complete the answer, there are also parameters to update the grid when adding or modifying one or more lines.

When adding :

gridOptions.api.applyTransaction({ add: [array of rows you have added]});

When modifying :

gridOptions.api.applyTransaction({ update: [array of rows you have changed]});

Remarks : for older versions of AG Grid the method was api.updateRowData instead of api.applyTransaction

like image 42
A.Baudouin Avatar answered Sep 19 '22 12:09

A.Baudouin