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

问题

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.

回答1:

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

gridOptions.api.setRowData(gridOptions.rowData)

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

The author of ag-grid explains this in the ag-grid forum

回答2:

For better performance, use grid api calls to add/remove rows.
To insert a row at the beginning, that is copy of a selected row:

var rowData = JSON.parse(JSON.stringify(selectedNode.data));
gridOptions.api.insertItemsAtIndex(0, [rowData]);

To remove a selected row:

var selectedNodes = gridOptions.api.getSelectedNodes();
gridOptions.api.removeItems(selectedNodes);

Please insert new row only after a deep copy of original row.
Otherwise, api continues to refer to the same row.
So, the subsequent remove of new row, will remove original row from grid.

Please refer documentation for api details.
https://www.ag-grid.com/javascript-grid-insert-remove/

回答3:

There is a more efficient way described in the documentation : ag-Grid Updating Data.

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

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

For example with just one row deleted :

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

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

回答4:

$events.refreshInfiniteCache();

you can use this simply for update your grid

来源：https://stackoverflow.com/questions/35311052/how-to-upgrade-refresh-the-ag-grid-after-row-delete

标签

angular

ag-grid