keep filter after ag-grid update

ag-grid custom filter component
ag-grid floating filter example
ag-grid set filter
ag-grid external filter
ag-grid server side filtering
ag-grid boolean filter
ag-grid get filtered rows
ag-grid dropdown filter

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 ?


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);

Set Filter - Overview, Set Filter works like Excel, providing checkboxes to select values from a set. Version 20 The Set Filter is comprised of the following sections: If you instead set this to 'keep' , the grid will keep its currently set filter when the data is updated. When set to 'clear', updating the data in the grid by calling api.setRowData() (or updating the rowData property if bound by a framework) will clear (reset) the filter. If you instead set this to 'keep', the grid will keep its currently set filter when the data is updated. Default: 'clear'


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

Provided Filters, When set to 'clear' , updating the data in the grid by calling api. setRowData() (or updating the rowData property if bound by a framework) will clear (reset) the filter. If you instead set this to 'keep' , the grid will keep its currently set filter when the data is updated. Specifying a Polymer Filter. If you are using the ag-grid-polymer component to create the ag-Grid instance, then you will have the option of additionally specifying the filters as Polymer components.


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();
}

Column Filter: Core Feature of our Datagrid, Configuring Filters on Columns. Set filtering on a column using the column definition property filter . The property can have one of the following values: boolean  The answer is no. What ag-Grid does is similar to the change detection algorithm's in frameworks such as React or Angular. Doing this many check's in JavaScript is not a problem. Slowness comes when the DOM is updated many times. ag-Grid minimises the DOM updates by only updating the DOM where changes are detected.


Filter API, To deal with the scenario where the row data is changed without the grid been aware, the grid provides the following methods: Refresh Cells: api.refreshCells(  The grid then executes the change as an update transaction, keeping all of the grids selections, filters etc. Use this if you want to manage the data outside of the grid (eg in a Redux store) and then let the grid work out what changes are needed to keep the grid's version of the data up to date.


Working with Data: View Refresh, Value Change Detection: When a value for any cell changes (e.g. after an edit), This means the grid will automatically keep aggregation results (the values in the if you want to update the sorting, filtering or group grouping after an update,  Core feature of ag-Grid supporting Angular, React, Javascript and more. One such feature is View Refresh. If the data changes outside of the grid, get the grid to do a View Refresh to update the UI to the latest values. The grid will use change detection to only refresh values that have changed.


Change Detection: A Core Feature of our Datagrid, Updating data in the grid via the grid's API does not cover all the ways in Data can also change in the grid in the following ways: will be redone from scratch, i.e. sorting, filtering, grouping, aggregation and pivoting. Keeping all state means items such as row selection and group open / closed state will be maintained. The event handler gets the filter model from ag-Grid and persists its value in the UsersGridFilterService. Then the filterChanged event handler updates the URL query parameters to keep the state in