Deleting a row using api.updateRowData(transaction) has no effect on data source

user_2068123 0
Viewed 6754

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 ?

ag-grid-angular ag-grid transactions javascript
3 Answers

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.

user_16710780

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.

user_51873230

For anyone that come 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 common 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 });

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

user_113003140
Related