Как скрыть «Экспорт» из контекстного меню Ag-Grid и заменить вместо него «Панель инструментов»?

Question

Мне нужно удалить опцию экспорта по умолчанию, присутствующую в контекстном меню ag-grid, и включить в нее опцию панели инструментов.

Answer 1

Я сделал что-то похожее на @ 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
}

Answer 2

вы можете просто переопределить 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;
}

Чтобы добавить собственную логику в панель инструментов, вы должны:

создайте custom toolPanelComponent, и в этом компоненте вам просто нужно выполнить exportDataAsCsv() или 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 CustomToolPanelComponentAgGridModule.withComponents инициализация в вашей AppModule (или в любом другом модуле ag-grid)

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

добавление CustomToolPanelComponent ссылки в frameworkComponents в gridOptions

this.frameworkComponents = { customToolPanel: CustomToolPanelComponent};

добавить CustomToolPanelComponent ссылку (определенную в frameworkComponents) к sideBar.toolPanels массиву

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

Вот пример