如何在 Ag-Grid 中以编程方式显示 PopupMenu 列？
使用 gridApi 你可以隐藏它，但不能显示它
gridApi.hidePopupMenu()
我也尝试使用 FilterInstance 和 columnApi，但我没有找到任何有效的方法
gridApi.getFilterInstance(colKey)
gridColumnApi?.getColumn(colKey) ...
谢谢
【问题讨论】：
标签： reactjs ag-grid ag-grid-react
您可以添加一些解决方法来打开过滤器弹出窗口：
// 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);
基本上，您在 DOM 中找到按钮并对其执行虚拟点击。它不漂亮，但效果很好，也许我们将来会为此获得一个 API。
【讨论】：
您想要做的是访问 Ag Grid API 的 getFilterInstance()。以下是相关文档：https://www.ag-grid.com/javascript-grid/filter-api/
这是使用 getFilterInstance 方法访问和设置过滤器的一种方式
var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved') //added the option i wanted
FilterComponent.onFilterChanged();
这是一个相关的 Stackoverflow 问题：how to pre-set column filter in ag-grid
【讨论】：