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

Question

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
  }
}

Naren Murali · Accepted Answer · 2025-03-26 13:46:29Z

2

It would be best to raise a ticket on aggrid github, as far as a workaround, you can just make the column visible, then show the menu, then hide it again.

showColumnMenu(colKey: string) {
  // const foundIndex = this.columnDefs.find((item: any) =>item.field === colKey );
  // this.gridApi.moveColumns([colKey], this.columnDefs.length - 1);
  this.gridApi.setColumnsVisible([colKey], true);
  this.gridApi.showColumnMenu(colKey);
  setTimeout(() => {
  // this.gridApi.moveColumns([colKey], foundIndex);
  this.gridApi.setColumnsVisible([colKey], false);
  })
}

Plunkr Demo

answered Mar 26 at 13:46

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Plunkr Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related