Ag-Grid, React, Redux Filters Issue - can not set setFilterModel() - ag-grid

Question

Here is my scenario,
I am making a onFetchEvents Redux Action call and getting all events and passing it as follows. rowData={this.props.events.data}
Everything works fine. Now I need to apply a filter, and this requires another call to the server.
I set enableServerSideFilter: true, so that when a filter applied, datagrid does not make a call on its own.
I monitor filter changes and call handleFilterChanged. I get the const filterModel = this.gridApi.getFilterModel(); and send it to rest endpoint.
Everything works fine but the datagrid does not remember the filter state.
I tried this.gridApi.setFilterModel(filterModel); but it gets me into infinite loop.
To make the long story short, how can I use filters with Redux so that I have full control also where should I use this.gridApi.setFilterModel()
Let me know if you need more clarification.
Thanks
/* eslint-disable */
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { AgGridReact } from 'ag-grid-react';
import { fetchEvents } from '#mc/duck/actions/AppActions';
import 'ag-grid-enterprise';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
// import './customTheme.scss';
// col resizing pipe is not visibles
class DatagridPage extends Component {
constructor(props) {
super(props);
this.state = {
params: {
filterModel: {},
page: 1,
limit: 10,
},
gridOptions: {
enableServerSideFilter: true,
enableSorting: true,
enableColResize: true,
suppressMenuHide: true,
pagination: true,
animateRows: true,
onFilterChanged: this.handleFilterChanged,
onSortChanged: () => console.log('onSortChanged'),
columnDefs: [
{
headerName: 'id',
field: 'id',
headerClass: 'test',
checkboxSelection: true,
filter: 'agTextColumnFilter',
},
{
headerName: 'name',
field: 'name',
headerClass: 'test',
filter: 'agTextColumnFilter',
},
{
headerName: 'risk score',
field: 'risk_score',
headerClass: 'test',
filter: 'agTextColumnFilter',
},
{
headerName: 'urgency',
field: 'urgency',
headerClass: 'test',
filter: 'agTextColumnFilter',
},
{ headerName: 'type', field: 'type', headerClass: 'test', filter: 'agTextColumnFilter' },
{
headerName: 'artifacts',
field: 'artifacts',
headerClass: 'test',
filter: 'agTextColumnFilter',
},
{
headerName: 'created',
field: 'created',
headerClass: 'test',
filter: 'agTextColumnFilter',
},
{
headerName: 'updated',
field: 'updated',
headerClass: 'test',
filter: 'agTextColumnFilter',
},
{ headerName: 'due', field: 'due', headerClass: 'test', filter: 'agTextColumnFilter' },
{
headerName: 'owner',
field: 'owner',
headerClass: 'test',
filter: 'agTextColumnFilter',
},
{
headerName: 'status',
field: 'status',
headerClass: 'test',
filter: 'agTextColumnFilter',
},
{
headerName: 'description',
field: 'description',
headerClass: 'test',
filter: 'agTextColumnFilter',
},
],
},
};
}
componentDidMount() {
console.log('componentDidMount');
const { params } = this.state;
this.props.onFetchEvents(params);
}
onGridReady = params => {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
this.gridApi.sizeColumnsToFit();
console.log('onGridReady', this.gridApi.getFilterModel());
};
onPageSizeChanged(newPageSize) {
var value = document.getElementById('page-size').value;
const paramsCopy = { ...this.state.params };
paramsCopy.limit = Number(value);
paramsCopy.page = 1;
this.setState({ params: paramsCopy }, () => this.props.onFetchEvents(paramsCopy));
this.gridApi.paginationSetPageSize(Number(value));
}
handleFilterChanged = () => {
console.log('handleFilterChanged');
const filterModel = this.gridApi.getFilterModel();
const paramsCopy = { ...this.state.params, filterModel };
console.group('handleFilterChanged');
console.log('filterModel', filterModel);
console.log('state filterModel', this.state.params.filterModel);
if (!areEqualShallow(filterModel, this.state.params.filterModel)) {
this.gridApi.setFilterModel(filterModel);
this.setState({ params: paramsCopy }, () => this.props.onFetchEvents(paramsCopy));
}
console.groupEnd();
function areEqualShallow(a, b) {
for (var key in a) {
if (!(key in b) || a[key] !== b[key]) {
return false;
}
}
for (var key in b) {
if (!(key in a) || a[key] !== b[key]) {
return false;
}
}
return true;
}
// this.gridApi.setFilterModel(filterModel);
};
render() {
return (
<Fragment>
<div>
Page Size:
<select onChange={this.onPageSizeChanged.bind(this)} id="page-size">
<option value="10">10</option>
<option value="100">100</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
</div>
<div
className="ag-theme-balham-dark"
style={{
height: '500px',
width: '100%',
}}
>
<AgGridReact
rowSelection="multiple"
gridOptions={this.state.gridOptions}
columnDefs={this.state.columnDefs}
rowData={this.props.events.data}
defaultColDef={this.state.defaultColDef}
onGridReady={this.onGridReady}
rowHeight={49}
/>
</div>
</Fragment>
);
}
}
const mapStateToProps = state => ({
events: state.app.events,
});
const mapDispatchToProps = {
onFetchEvents: params => fetchEvents(params),
};
export default connect(
mapStateToProps,
mapDispatchToProps,
)(DatagridPage);

Answer 1

In your column definition try setting the newRowsAction to "keep", e.g.
{
headerName: 'name',
field: 'name',
headerClass: 'test',
filter: 'agTextColumnFilter',
filterParams: {
newRowsAction: 'keep'
}
}
Or set it for all via defaultColDef, e.g.
gridOptions: {
defaultColDef: {
filterParams: {
newRowsAction: 'keep'
}
}
}