CODEWITHSUNDEEP
angularag-grid
Raja Reddy
Raja Reddy

Reputation: 447

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.

Upvotes: 22

Views: 110025

Answers (8)

SakthiSureshAnand
SakthiSureshAnand

Reputation: 1362

In my case : i want to reload the ag grid with user selected (when user navigate back using previous button ).

Below code will reselect the checkbox again, based on userContext name value.

Code:

const gridReady = (params) => {
     params.api.forEachNode((node) => {
      if(node.data.name === userContext.name) {
        node.setSelected(true); 
      } 
    });
}

<AgGridReact onGridReady = {gridReady}/>

Upvotes: 0

Bojidari
Bojidari

Reputation: 155

Below is how i delete Rows from my AgGrid.

  1. Select 1 or more rows using ridApi.getSelectedNodes.

  2. Map through the selected rows and take out the index of the given row.

  3. Use array method filter to filter out all the rows that are not selected

  4. Spread the filtered rows with the old rows

    const selectedRows: RowNode[] = this.gridApi.getSelectedNodes();
const rowsToRemove = selectedRows.map(node => node.rowIndex);
const filteredRows = allRows.filter((_, i) => !rowsToRemove.includes(i));

this.rowData = [...filteredRows]

hope this help to anyone in need of it!

Upvotes: 0

A.Baudouin
A.Baudouin

Reputation: 2925

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

Upvotes: 13

Moises Sacal
Moises Sacal

Reputation: 646

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

Upvotes: 37

NearHuscarl
NearHuscarl

Reputation: 81310

Updated answer for newer versions of agGrid.

From version 23.1.0+: Use applyTransaction(transaction)

gridApi.applyTransaction({ remove: rowArray });

// similarly you can add or update using transaction
gridApi.applyTransaction({ update: rowArray});
gridApi.applyTransaction({ add: rowArray});

Where rowArray is an array of row data. Existing rows data can be accessed from RowNode.data.

Example

onRemoveFirst() {
  const firstRow = this.gridApi.getRenderedNodes()[0].data;

  if (!firstRow) return;
  this.gridApi.applyTransaction({ remove: [firstRow] });
}

onRemoveSelected() {
  const selectedData = this.gridApi.getSelectedRows();
  this.gridApi.applyTransaction({ remove: selectedData });
}

onThanos() {
  const itemsToRemove = [];

  this.gridApi.forEachNodeAfterFilterAndSort((rowNode) => {
    const shouldThanos = randomBetween(1, 100) <= 50;

    if (shouldThanos) {
      itemsToRemove.push(rowNode.data);
    }
  });
  this.gridApi.applyTransaction({ remove: itemsToRemove });
}

Live Demo

Edit 35311052/how-to-upgrade-refresh-the-ag-grid-after-row-delete/

Upvotes: 2

Rajat
Rajat

Reputation: 172

To update the data in a particular cell of aggrid

        let rowNode = f.gridApi.getRowNode(f.id);  // use to find the rowNode
        rowNode.setDataValue('myPrice','1000') // update the datavalue in the price cell

f is current node of the aggrid

Upvotes: 1

Ahmad Shakeel
Ahmad Shakeel

Reputation: 31

$events.refreshInfiniteCache();

you can use this simply for update your grid

Upvotes: 3

majoshi1
majoshi1

Reputation: 116

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/

Upvotes: 7

Related Questions