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?

score 15 · Accepted Answer · answered Jul 13 '17 at 15:19

15

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.

answered Jul 13 '17 at 15:19

Jarod Moser

7,022
2
24
52

1

Thanks, I found this shortly after posting. It still surprises me why column filters and row data should be so tightly coupled. I would have expected to be able to just set new row data and have the current column filters applied to the new data. Anyhow, following the docs suggestion does work, I believe you also have to implement the getRowNodeId callback. – Charles Gamble Jul 16 '17 at 12:41
sometimes I find it amusing that a solution is so precisely discussed that it just gives way to a very quick implementation of ideas. – Rishabh Apr 05 '18 at 09:30
2

The `deltaRowDataMode` is deprecated since version 23.1.x. The new property is `immutableData` which you can find the document here: https://www.ag-grid.com/javascript-grid-immutable-data/ – Vahid Oct 20 '20 at 15:26

score 1 · Answer 2 · answered Jan 15 '20 at 12:49

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

Subscribe to rowDataChanged event of the ag grid.

(rowDataChanged)="onRowDataChanged($event)"

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 lost when updating row data in ag-grid

2 Answers2

Linked