How to hide 'Export' from Ag-Grid Context Menu and replace 'Tool Panel ' instead?

Question

I need to remove default export option present in ag-grid context menu and include the tool panel option in it.

Answer 1

you can just override getContextMenuItems function inside gridOptions

getContextMenuItems: this.getCustomContextMenuItems.bind(this)

getCustomContextMenuItems(params:GetContextMenuItemsParams) : MenuItemDef {
    let contextMenu: MenuItemDef = [];

    //... custom export just for info ... 
    contextMenu.push({
            name:"Export",
            subMenu:[
                {
                    name: "CSV Export (.csv)",
                    action: () => params.api.exportDataAsCsv()
                },
                {
                    name: "Excel Export (.xlsx)",
                    action: () => params.api.exportDataAsExcel()
                },
                {
                    name: "Excel Export (.xml)",
                    action: () => params.api.exportDataAsExcel({exportMode:"xml"})
                }
            ]
        })

    return contextMenu;
}

To add own logic in tool panel you have to :

create a custom toolPanelComponent, and within this component, you just need to execute exportDataAsCsv() or exportDataAsExcel().

import {Component, ViewChild, ViewContainerRef} from "@angular/core";
import {IToolPanel, IToolPanelParams} from "ag-grid-community";

@Component({
    selector: 'custom-panel',
    template: `<button (click)="handleExportClick()">Export</button>`
})

export class CustomToolPanelComponent implements IToolPanel {
    private params: IToolPanelParams;

    agInit(params: IToolPanelParams): void {
        this.params = params;
    }

    handleExportClick(){
      this.params.api.exportDataAsCsv()
    }
}

add CustomToolPanelComponent to AgGridModule.withComponents initialization in your AppModule (or whatever module ag-grid is injected)

@NgModule({
  imports: [
    ...
    AgGridModule.withComponents([CustomToolPanelComponent])
  ],
  declarations: [AppComponent, CustomToolPanelComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

add CustomToolPanelComponent reference in frameworkComponents within gridOptions

this.frameworkComponents = { customToolPanel: CustomToolPanelComponent};

add CustomToolPanelComponent reference (defined in frameworkComponents) to sideBar.toolPanels array

this.sideBar = {
  toolPanels: [
    ...
    {
      id: "customPanel",
      labelDefault: "Custom Panel",
      labelKey: "customPanel",
      iconKey: "custom-panel",
      toolPanel: "customToolPanel"
    }
  ]
};

Here is a sample