Ag-grid Angular -- Show column menu of invisible column

In my application I have an ag-grid set up with some of the columns being always hidden. I need to be able to show the filter/column menu for these columns while they are hidden. (by pressing an arbitrary button elsewhere)

Originally this was achieved using gridApi.showColumnMenuAfterButtonClick(someHtmlElement). This is now deprecated and the intended replacement, gridApi.showColumnMenu(colId) doesn't work because it is unable to locate the header control for the column.

I don't have high hopes that this is still possible, but maybe someone knows something I don't. Thanks in advance.

A minimal example would be.

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
ClientSideRowModelModule,
ColDef,
GridApi,
GridReadyEvent,
ModuleRegistry,
ValidationModule,
} from "ag-grid-community";
ModuleRegistry.registerModules([
ClientSideRowModelModule,
ValidationModule /* Development Only */,
]);
import { IOlympicData } from "./interfaces";

@Component({
selector: "my-app",
standalone: true,
imports: [AgGridAngular],
template: `<div style="height: 100%; box-sizing: border-box">
<ag-grid-angular
style="width: 100%; height: 100%;"
[columnDefs]="columnDefs"
[rowData]="rowData"
(gridReady)="onGridReady($event)"
/>
<button (click)="onClick($event)">Menu</button>
</div> `,
})
export class AppComponent {
columnDefs: ColDef[] = [
{ field: "athlete", filter:'agTextColumnFilter', hide:true },
{ field: "sport", filter:'agTextColumnFilter' },
{ field: "age" },
];
rowData!: IOlympicData[];
api!:GridApi;
constructor(private http: HttpClient) {}

onGridReady(params: GridReadyEvent<IOlympicData>) {
this.api = params.api;
this.http
.get<
IOlympicData[]
>("https://www.ag-grid.com/example-assets/olympic-winners.json")
.subscribe((data) => (this.rowData = data));
}

onClick(event){
//this.api.showColumnMenu('sport'); works
this.api.showColumnMenu('athlete'); //doesn't work
}
}

Continue reading...