0

I have a react app and everything seems to work fine. I want to add an additional piece of functionality with filtering although I'm currently stuck.

Can anyone provide some advice on how to preset the filter

using the example filtering method I've seen in this article I've tried to implement a basic example although it doesn't work

this.state = {
   gridOptions: {
  .
  .
  .
      onGridReady: this.initialFilter
}, 

initialFilter(){
    tmp = {Currency: {type: 'contains', filter: 'usd'}};
    this.state.gridOptions.api.setFilterModel(tmp);
    this.state.gridOptions.api.onFilterChanged();

}

What I expected from running this is the Currency column would be filtered for condition containing filter text usd

================================================= edit: after trying 

initialFilter(){
    let hi=this.state.gridOptions.api.getFilterInstance('Currency');
    hi.setType('contains');
    hi.setFilter('usd');
    hi.onFilterChanged();
}

Nothing happens + no error

but when i add the code in an existing method for changing filters (when i manually add a filter):

onAfterFilterChanged() {
    let hi=this.state.gridOptions.api.getFilterInstance('Currency');
    hi.setType('contains');
    hi.setFilter('usd');
    hi.onFilterChanged();

    this.setState({
        rowsToDisplay: this.state.gridOptions.api.filterManager.rowModel.rowsToDisplay.length,
        filtering: this.props.report.views.filters
    });
    this.props.filterme(this.state.filtering);      
}

then i get the below error

Full error: Uncaught RangeError: Maximum call stack size exceeded
at RowRenderer.workOutFirstAndLastRowsToRender (dme-ui-buidle.js:13181)
at RowRenderer.drawVirtualRows (dme-ui-buidle.js:13178)
at RowRenderer.refreshAllVirtualRows (dme-ui-buidle.js:13138)
at RowRenderer.refreshView (dme-ui-buidle.js:13034)
at RowRenderer.onModelUpdated (dme-ui-buidle.js:12979)
at RowRenderer.onPageLoaded (dme-ui-buidle.js:12931)
at dme-ui-buidle.js:2684
at Array.forEach (<anonymous>)
at EventService.dispatchEvent (dme-ui-buidle.js:2683)
at PaginationProxy.onModelUpdated (dme-ui-buidle.js:27264)
user3120554
  • 641
  • 2
  • 11
  • 21

1 Answers1

0

According to the documentation here:

https://www.ag-grid.com/javascript-grid-filtering/

and this plunker:

https://plnkr.co/edit/0NoAA9cEZa1Zr9brMZ2I?p=info

something like this should do the trick:

var yourFilterComponent = gridOptions.api.getFilterInstance('youfieldname');
yourFilterComponent.setType('contains');
yourFilterComponent.setFilter('usd');
yourFilterComponent.onFilterChanged();
Alexander Zbinden
  • 2,315
  • 1
  • 17
  • 21
  • I've tried doing this (only difference is i used "this.state.gridOptions......." for my Filter Component but I still keep getting an error: Uncaught RangeError: Maximum call stack size exceeded I;m not sure what's causing it if I put the code in it's own method like i did in the original post, then nothing happens (and no error). If I put the code in an existing method onAfterFilterChanged() then i see the filter apply but I get that error and it stops me from manually applying other filters :( – user3120554 Jul 07 '17 at 01:41
  • Could it be that I need to use the code you specified, but in a certain method? – user3120554 Jul 07 '17 at 01:42
  • updated original post with my results after trying this – user3120554 Jul 07 '17 at 01:50
  • it looks like an issue of ordering. code needs to be applied at some point after the grid is ready but before i manually apply my own filter on top. i say this because i copy/pasted the code into a method related to row selection, and the grid filtered as expected when i clicked a row. I just need to find out where to put the code – user3120554 Jul 07 '17 at 02:29