在 Ag-Grid 中显示 PopupMenu

Question

如何以编程方式在 Ag-Grid 中显示 PopupMenu 列？

PopupMenu Ag-Grid

使用 gridApi 可以隐藏它，但不能显示它

gridApi.hidePopupMenu()

我也尝试使用 FilterInstance 和 columnApi，但我还没有找到任何有效的东西

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

谢谢

Answer 1

您要做的是访问 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();

这是一个相关的 Whosebug 问题：

Answer 2

您可以添加一些解决方法来打开过滤器弹出窗口：

// 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 中显示 PopupMenu

Show PopupMenu in Ag-Grid

reactjs

ag-grid

ag-grid-react