javascriptreactjsag-grid

How can I detect when the AG Grid filter dialog closes?


I have an AG Grid, implemented in React/Typescript. It automatically updates with new data, and the columns have filters. When new data comes in, the grid reloads with the changes, which closes the filter dialog if it's open. That's not ideal. It seems like a viable solution would be to track when the dialog is open, and hold off on updates while it's open. I can track when the filter dialog opens (onFilterOpened), or when it changes (onFilterChanged), but I'm not certain how to detect closing the dialog without making a change by clicking off of it so that I can resume changes.

Here's the event code (which is basically just console logs right now) based on what an AI model suggested:

const onFilterOpened = () => {
  console.log("Filter opened.");
  setIsFilterDialogOpen(true);
};

const onSortChanged = () => {
  if (gridApiRef.current) {
    columnState.current = gridApiRef.current.getColumnState();
  }
};

const onFilterChanged = (event: { api: GridApi; }) => {
  if (
    event.api.getFilterModel() &&
    Object.keys(event.api.getFilterModel()).length > 0
  ) {
    console.log("Filter dialog is opened");
    setIsFilterDialogOpen(true);
  } else {
    console.log("Filter closed.");
    setIsFilterDialogOpen(false);
  }

  console.log("Filter changed");
};

And set up here:

<AgGridReact  
  className={"ag-theme-astro"}  
  columnDefs={colDefGrouped}  
  defaultColDef={defaultColDef}  
  rowData={groupedRowData}  
  domLayout="autoHeight"  
  pagination={true}  
  paginationPageSize={20}  
  isFullWidthRow={isFullWidthRow}  
  fullWidthCellRenderer={fullWidthCellRenderer}  
  getRowHeight={getRowHeight}  
  onGridReady={onGridReady}  
  onFilterChanged={onFilterChanged}
  onFilterOpened={onFilterOpened}
  data-testid="groupedGrid"
/>

I get the "Filter opened" message when it opens, and "Filter dialog is opened" as I type in changes in the filter. But nothing when it closes.


Solution

  • Ultimately, I took the advice from one of the comments, and just queried the HTML of the page.

    // Directly check for the existence of .ag-filter-wrapper
    const filterDialog = document.querySelector(".ag-filter-wrapper");
    if (filterDialog) {
      console.log("Filter dialog is open, delaying data reload.");
      return;
    }
    

    This accomplished what I needed, which was halting my update routine if the filter was still open.