CODEWITHSUNDEEP
javascriptreactjsag-grid
Josiah Nunemaker
Josiah Nunemaker

Reputation: 819

Ag-Grid external filtering doesn't respond to state changes

I've been struggling to get Ag-Grid's external filtering responding to state changes. When I update isExternalFiltered, the value of isExternalFiltered in the doesExternalFilterPass callback doesn't change. If I supply a key to the grid to force it to rerender each update, it seems to work, but it causes an expensive grid reinitialization.

I'll also note that I've tried calling the grid api's onFilterChanged method when the filter changes, but that doesn't seem to have any effect.

The docs don't seem to have any examples of external filtering with React (or any framework, for that matter), so I'm beginning to wonder if maybe it isn't supported? 

    const Grid = () => {

        const [gridData, setGridData] = useState([]);
        const [columnDefs, setColumnDefs] = useState([]);
        const [isExternalFiltered, setExternalFiltered] = useState(false);

        /*
         Omitted for brevity
        */

        return (            
            <div className="ag-theme-material">
                <AgGridReact
                    // omitted for brevity
                    columnDefs={columnDefs}
                    rowData={gridData}
                    isExternalFilterPresent={() => true}
                    doesExternalFilterPass={node => {
                        return isExternalFiltered
                            ? filterFunction(node.data)
                            : true;
                    }}
                />
            </div>
        );
    };

Upvotes: 4

Views: 2161

Answers (1)

Jstuff
Jstuff

Reputation: 1342

A bit late but this morning I ran into a similar issue and I'm going to post what I found to help people in the future with this same problem. This happens because ag-grid React never updates the callback for isExternalFilterPresent. I confirmed this by storing the callback in a variable, causing the grid to rerender, and then inspecting the callback for isExternalFilterPresent inside of the gridOptions gotten from the gridApi. These two callbacks are always the same which means that any values that your callback, isExternalFilterPresent, close over are never updated. The way around this is to use a ref for any of the values that isExternalFilterPresent closes over so you always access the most up to date value.

Upvotes: 4

Related Questions