I have a custom cell renderer to delete given entity.

function ActionButtonsCellRenderer() {}

ActionButtonsCellRenderer.prototype.init = function(cellRenderParams) {
    var tempDiv = document.createElement('div');
  
    var deleteButton = document.createElement("a");
    deleteButton.href = "javascript:void(0)";
    deleteButton.innerHTML = "<i class='fa fa-trash'></i>";
    
    tempDiv.appendChild(deleteButton);
    
    deleteButton.addEventListener("click",function(){
        cellRenderParams.api.updateRowData({remove: [cellRenderParams.data]})

    });
    
    this.eGui = tempDiv.firstChild;
};

ActionButtonsCellRenderer.prototype.getGui = function() {
    return this.eGui;
};

It actually deletes the row from GUI. No problem there.

But when user adds another row using below logic;

function addRow() {
    var row = {t1 : "test"}
        
    dataSource[dataSource.length] = row;
    agGridOptions.api.setRowData(dataSource);
}

Deleted row also became visible again in the grid. Which means that the dataSource object is not updated.

What am I doing wrong here ? The dataSource must be updated in my scenario.

Isn't there a two-way binding which I can use ?

I have a custom cell renderer to delete given entity.

function ActionButtonsCellRenderer() {}

ActionButtonsCellRenderer.prototype.init = function(cellRenderParams) {
    var tempDiv = document.createElement('div');
  
    var deleteButton = document.createElement("a");
    deleteButton.href = "javascript:void(0)";
    deleteButton.innerHTML = "<i class='fa fa-trash'></i>";
    
    tempDiv.appendChild(deleteButton);
    
    deleteButton.addEventListener("click",function(){
        cellRenderParams.api.updateRowData({remove: [cellRenderParams.data]})

    });
    
    this.eGui = tempDiv.firstChild;
};

ActionButtonsCellRenderer.prototype.getGui = function() {
    return this.eGui;
};

It actually deletes the row from GUI. No problem there.

But when user adds another row using below logic;

function addRow() {
    var row = {t1 : "test"}
        
    dataSource[dataSource.length] = row;
    agGridOptions.api.setRowData(dataSource);
}

Deleted row also became visible again in the grid. Which means that the dataSource object is not updated.

What am I doing wrong here ? The dataSource must be updated in my scenario.

Isn't there a two-way binding which I can use ?

• javascript
• transactions
• ag-grid
• ag-grid-angular

• I know it has been a while since this question but did you ever figure this out? I'm doing something similar but I'm using Master/Detail functionality. When I expand another node the row es back (though actually detailed from actual DB datasource). When I modified one of the a-g grid examples to do this it works fine and I can't seem to see what the difference is. – user1015196 Commented Jul 21, 2018 at 19:56
• I figured out my issue just in case anyone es across this issue. Mine has to do with Master/Detail functionality. When deleting a row you have to delete from both the detail grid and from the data in the master. Once I did that my row would no longer reappear in the grid. – user1015196 Commented Jul 23, 2018 at 4:11

3 Answers 3

For deleting the selected rows use this code,

 this.selectedNodes = this.GridOptions.api.getSelectedNodes();                   
 this.GridOptions.api.removeItems(this.selectedNodes);
 this.GridOptions.api.refreshView();    

Now selected Row will be deleted.

Ag-grid makes a copy of the data that you provide to it. So when you are using updateRowData, ag-grid will update the data that it has, not your original data array. This is good design to avoid unexpected results and loss of original data.

There are two possible solutions to your issue:

1. mutate your original data anytime you need to update the data - this will likely get really messy really fast

   --- OR ---

2. use the ag-grid's built in functionality of allowing it to update row data, then when you need to do something with the dataSource (such as downloading in an excel or sending to some other function) use the getModel() function to get the data that ag-grid is aware of.

For anyone that e across this post i know its a long time ago but.

I had to add and remove a row from one table to another without UI selection

Lets say we have a grid with mon columnDefs e.g. headersName, fields ( its important to have fields) and etc.

We gonna have 2 columns:

{
   headerName: 'Name',
   field: 'name',
   cellRenderer: params => params.data.name,
   ....
},
{
   headerName: 'Age',
   field: 'age',
   cellRenderer: params => params.data.age,
   ....
},

What i did was:

const item = {
   'name': 'New name',
   'age': 25,
}

* Remove a row - if the grid already have this item
this.gridApi.updateRowData({ remove: [item] });

* Add row - if the grid doesn't have it
gridApi2 is your seconds grid table api
this.gridApi2.updateRowData({ add: [item] });

add/remove: [item] - it has to be array

if you need to refresh for some reasons (sometime change detector does't update ) there is 2 AgGrid refresh options: Refresh Cells and Redraw Rows..for this case i will use refreshCells()

this.gridApi.refreshCells({ force: true });

this.gridApi2.refreshCells({ force: true });

• used materials: https://www.ag-grid./javascript-grid-data-update/
  • section: Full CRUD & Bulk Updating
  • method: Method 2 - Transaction

This works for me. Of course here we are assuming that we have a grid working e.g. (gridReady)="onGridReady($event)"