Column filter lost when updating row data in ag-grid

Question

I am trying to pre-configure a column filter in ag-grid, a simple text "equals" filter to show only rows matching some specified text, I have got this working.

However as soon as I replace the model data with a fresh set of rows, my filter disappears.

I have tried updating my model data in 2 ways:

• by replacing the value of the bound rowData property (I'm using Vue.js)
• calling api.setRowData(newRows)

Both of these cause the column filter to be lost.

Is there a way to update the model data without losing column filters?

Answer 1

I had the same issue and this is you can do keep apply data filter after the row data updated.

1. Subscribe to rowDataChanged event of the ag grid.

(rowDataChanged)="onRowDataChanged($event)"

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

Answer 2

In their documentation it says that you can set the gridOptions property deltaRowDataMode=true, then use the api.setRowData(newRows). This will compare the current row data to the new data to see what has changed and update accordingly. Without this property set, the grid rips out all settings to ensure a fresh start.