keep filter after ag-grid update

8
votes

I'm trying to keep a grid's filter after updating a row.

When I click on a row in the grid, I open a dialog where I update the informations for this row, and then I look for the clicked row in the grid's rowData after that I update the corresponding record in the rowData with the values from the dialog, as following :

row[0].x = dg.x;
row[0].y = dg.y;
dg.gridOptions.rowData[index] = row[0];
dg.gridOptions.api.setRowData(newRows);

But after this I loose the filter on the grid, I did some search and I tried all the following solutions :

  1. Setting the gridOptions property deltaRowDataMode to true.

  2. filterParams: {apply: true, newRowsAction: 'keep'}

But none of these has worked.

How can I solve this ?

3
javascriptangularjsag-grid
after grid, apply filter again using getFilterInstance(<column>) - Naga Sai A
Show your updateGrid function, and any other relevant code. You probably need to do your update differently. ag-grid.com/javascript-grid-data-update - thirtydot
@thirtydot please check my edit. - Renaud is Not Bill Gates
Well, you can't use setRowData if you want to keep your filter selection, here's a quote from the link in my previous comment: "When you call api.setRowData(newData), the grid discards all previous selections and filters, and completely overwrites the old data with the new.". Read through the docs and look at the demos/code to find the solution. If you need more help, let me know and I'll write an answer. - thirtydot

3 Answers

12
votes

Use this method (gridOptions.api.refreshCells()) instead of setRowData. Or if you need to use setRowData, save the filter model before the call and apply the filter again afterwards using these methods: 

const model = this.gridOptions.api.getFilterModel();
//some code
this.gridOptions.api.setFilterModel(model);
10
votes

You can set the filterParams newRowsAction to keep, like that 

dg.defaultColDef = { filterParams: { newRowsAction: 'keep'}} ;

refer to https://www.ag-grid.com/javascript-grid-filtering/index.php

-1
votes

I had same issue and this what I did to resolve it (kinda hacky).

  1. Subscribe to rowDataChanged event of the ag grid.
(rowDataChanged)="onRowDataChanged($event)"
  1. Inside the onRowDataChanged put your filtration logic
// Get a reference to the name filter instance
const filterInstance = this.gridApi.getFilterInstance('fieldNameHere');
// Call some methods on Set Filter API that don't apply the filter
filterInstance.setModel({
    type: 'contains', // type of filter
    filter: 'yourData' // set filter on data
});
// Get grid to run filter operation again
this.gridApi.onFilterChanged();

onRowDataChanged will be triggered twice, first when the grid clears everything and second when the data reloaded. So, you should put some conditions to avoid any errors.

For example, I needed to set the filter from the data that was loaded after the refresh this is what I did:

const filtered = this.rowData.filter(x => x.Id === this.Id);
if (filtered.length > 0) {
    // Get a reference to the name filter instance
    const filterInstance = this.gridApi.getFilterInstance('fieldNameHere');
    // Call some methods on Set Filter API that don't apply the filter
    filterInstance.setModel({
        type: 'contains', // type of filter
        filter: filtered[0].name // set filter on data
    });
    // Get grid to run filter operation again
    this.gridApi.onFilterChanged();
}