Column filter lost when updating row data in ag-grid

user_153067 0
Viewed 6326

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?

ag-grid
2 Answers

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