如何从 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

Answer 2

我做了类似于@un.spike的事情。我使用 params.context.gridApi 而不是 api 因为 api 没有这些功能。

getContextMenuItems(params) {
return [
  'copy',
  'copyWithHeaders',
  'paste',
  'separator',
  {
    name: 'Export All',
    subMenu: [
      {
        name: 'CSV Export',
        action: () => {
          params.context.gridApi.exportDataAsCsv();
        }
      },
      {
        name: 'Excel Export (.xlsx)',
        action: () => {
          params.context.gridApi.exportDataAsExcel();
        }
      },
      {
        name: 'Excel Export (.xml)',
        action: () => {
          params.context.gridApi.exportDataAsExcel({ exportMode: 'xml' });
        }
      }
    ]
  }
];

}

以及我生成上下文的位置

gridOptions = {
    context: this
}

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

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

ag-grid