CODEWITHSUNDEEP
javascriptangularjsag-grid
Renaud is Not Bill Gates
Renaud is Not Bill Gates

Reputation: 2074

keep filter after ag-grid update

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 ?

Upvotes: 16

Views: 20346

Answers (3)

Muhammad Hannan
Muhammad Hannan

Reputation: 2567

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

Upvotes: -1

Sameh
Sameh

Reputation: 1418

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

Upvotes: 26

Atif Majeed
Atif Majeed

Reputation: 1071

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

Upvotes: 14

Related Questions