ag-grid - 如何从 Ag-Grid 上下文菜单中隐藏 'Export' 并替换为 'Tool Panel '？

Question

我需要删除 ag-grid 上下文菜单中的默认导出选项，并在其中包含工具面板选项。

Answer 1

你可以just override getContextMenuItems 函数在 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;
}

要在工具面板中添加自己的逻辑，您必须:

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