在 ag-grid 更新后保持过滤器

Question

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 ?

Answer 1

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

Answer 2

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

Answer 3

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

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