Show PopupMenu in Ag-Grid

Question

How can I show programmatically the column PopupMenu in Ag-Grid?

With the gridApi you can hide it, but not show it

gridApi.hidePopupMenu()

I try also with the FilterInstance and the columnApi, but I haven't found anything that works

gridApi.getFilterInstance(colKey)
gridColumnApi?.getColumn(colKey) ...

Thanks

score 1 · Accepted Answer · answered Aug 25 '21 at 08:23

you can add a little workaround to open the filter popup:

// find the header menu button for the desired column
const colElement = document.querySelector("div[col-id='" + desiredColumn.getColId() + "'] > .ag-cell-label-container > .ag-header-cell-menu-button");
colElement.dispatchEvent(new Event("click"));   // simulate a click on the menu button
// the next part ist to switch to the filter tab:
setTimeout(() => {    // give the browser some time to render the menu
  const tabElement = document.querySelectorAll("div.ag-tabs-header > .ag-tab")[1]; // select the filter tab
  if (!tabElement.classList.contains("ag-tab-selected")) {  // if the filter tab is not selected already
    tabElement.dispatchEvent(new Event("click")); // click the filter tab
  }
}, 10);

Basically, you locate the button in the DOM and execute a virtual click on it. It's not pretty but it works well, maybe we'll get an API for this in the future.

Yes, this is the solution I have also adopted – l.garg Sep 02 '21 at 14:57 — l.garg, Sep 02 '21 at 14:57

score 0 · Answer 2 · answered Jul 09 '21 at 16:53

What you're wanting to do is to access getFilterInstance() of the Ag Grid API. Here's the relevant documentation: https://www.ag-grid.com/javascript-grid/filter-api/

Here's one way of accessing, and setting the filter using the getFilterInstance method

var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved')  //added the option i wanted
FilterComponent.onFilterChanged();

Here's a related Stackoverflow question: how to pre-set column filter in ag-grid

With your solution you apply a new filter directly, you do not open the pop-up menu — l.garg, Jul 19 '21 at 08:08

score 0 · Answer 3 · answered May 04 '23 at 19:25

To open the filter menu this worked for me, you need a reference to the colum object and column api, this is the Sebastian's answer adapted to the filter menu elements:

const getColumnIndex = (): number => {
      return (
        columnApi
            .getColumns()
            ?.findIndex(col => col.getColId() === column.getColId()) ?? -1
      );
   };

// find the header menu button for the desired column
const colElement = document.querySelector("div[aria-colindex='" +
            (getColumnIndex() + 1) + "'] > .ag-floating-filter-button > .ag-floating-filter-button-button"
      );

// Simulate a click on the menu button
colElement?.dispatchEvent(new Event("click"));

Show PopupMenu in Ag-Grid

3 Answers3