how to get filter input value in Ag grid filter with react?

user_13691233 0
Viewed 111

I'm trying to get the value a user types as input of a filter with AG grid, like in a simple input with onChange function.

i tried onFilterChanged, but couldn't catch the value.

<div style={containerStyle}>
          <div style={gridStyle} className="ag-theme-alpine">
            <AgGridReact
              rowData={all.flat().reverse()}
              columnDefs={columnDefs}
              groupIncludeFooter={true}
              groupIncludeTotalFooter={true}
              defaultColDef={defaultColDef}
              animateRows={true}
              onFilterChanged={(e: any) =>
                console.log("filter has changed", e)
              }
            ></AgGridReact>
          </div>
        </div>

thanks for your help.

ag-grid reactjs
1 Answers

gridRef is necessary and loop all columns if any of each column contains a filtered string

html

    ref={gridRef}
    onFilterChanged={handleFilter}

jsx

const GridExample = () => {
    const gridRef = useRef();
///...columndefs and rowdata
}
this.handleFilter=()=> {
    alert(gridRef.current.api.getFilterInstance('athlete').appliedModel.filter);
  };

if second filter is active, gridRef.current.api.getFilterInstance('athlete').appliedModel.condition1.filter and gridRef.current.api.getFilterInstance('athlete').appliedModel.condition2.filter

working demo

Edited to Add: gridRef.current.api.getFilterModel() is possible which outputs json objects of all given filters.

{
            'athlete':
            {
                   condition1:
                   {
                          filterType: 'text',
                          type: 'contains',
                          filter: 'a'
                   },
                   condition2:
                   {
                          filterType: 'text',
                          type: 'contains',
                          filter: 'b'
                   },
                   filterType: "text",
                   operator: "AND"
            },
            'age':
            {
                   filterType: 'text',
                   type: 'contains',
                   filter: 'c'
            },
}

and if it is global filter (filtered from textbox outside grid), gridRef.current.api.filterManager.quickFilterParts is possible

user_28201500
Related