Ag-grid angular copy menu option not available

Question

I am using ag-grid with angular 8 with an enterprise license. For some reason, the default "copy", "copy with headers" context menu items are not available. Only the "Export" item is showing up. Other enterprise features are working fine, but I can't seem to figure out how to enable "copy".

I'm not sure what I can try next, I've tried using different imports, disabling features, ...

The ag-grid-angular tag:

<ag-grid-angular
      #agGrid
      style="width: 800px; height: 500px;"
      class="ag-theme-balham"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      rowGroupPanelShow="always"
      [modules]="modules"
      [sideBar]="true"
      rowSelection="multiple"
      enableRangeSelection="true"
      setSuppressClipboardPaste="false"
      [suppressDragLeaveHidesColumns]="true"
      [suppressMakeColumnVisibleAfterUnGroup]="true"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"

    ></ag-grid-angular>

The test component file looks like this:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AllModules , Module} from "@ag-grid-enterprise/all-modules";
import "@ag-grid-enterprise/core";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent  {

  private gridApi ;
  private gridColumnApi ;

  private columnDefs;
  private defaultColDef;
  private rowData;
  public modules: Module[] = AllModules;
  constructor(private http: HttpClient) {

    this.columnDefs = [
      {
        field: "athlete",
        width: 150,
        filter: "agTextColumnFilter"
      },
      {
        field: "age",
        width: 90
      },
      {
        field: "country",
        width: 120
      },
      {
        field: "year",
        width: 90
      },
      {
        field: "date",
        width: 110
      },
      {
        field: "gold",
        width: 100
      },
      {
        field: "silver",
        width: 100
      },
      {
        field: "bronze",
        width: 100
      },
      {
        field: "total",
        width: 100
      }
    ];
    this.defaultColDef = {
      enableValue: true,
      enableRowGroup: true,
      enablePivot: true,
      sortable: true,
      filter: true,
    };
  }


  onGridReady(params) {
    this.gridApi = params.api;
    this.gridApi.setSuppressClipboardPaste = false;
    this.gridColumnApi = params.columnApi;

    this.http
      .get("https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json")
      .subscribe(data => {
        this.rowData = data;
      });
  }

}

I'm not sure if the following is related, but I'll add it as extra info: when I try to bind the enterprise modules "AllModules" to the ag-angular-grid HTML, some features stop working (like the sidebar) and I get the browser error:

ag-Grid: unable to use Column Tool Panel as module @ag-grid-enterprise/column-tool-panel is not present. You need to load the module with: import "@ag-grid-enterprise/column-tool-panel"

Answer 1

There are two ways to include AG Grid in your project, either via the complete packages or by using the feature modules.

From the docs there is a warning about mixing approaches which is leading to the issues above.

It is important that you do not mix packages and modules in the same application as this will result in AG Grid being included twice and doubling your bundle size! All modules are scoped by either @ag-grid-community/* or @ag-grid-enterprise/* and should not be mixed with the standalone packages of ag-grid-community and ag-grid-enterprise.

Modules	Packages
@ag-grid-community/xxxxx	ag-grid-community
@ag-grid-enterprise/xxxxx	ag-grid-enterprise
@ag-grid-community/angular	ag-grid-angular

I have written about this more in this blog post which explains how to use each approach.

Also, all-modules is no longer recommended. If you are using that I would recommend switching to use the package approach as this will enable you to have all the grid features available.

Answer 2

Also, there may be a problem with your package.json. I recently upgraded Ag-Grid versions and the control panel stopped working. Only after upgrading all of the @angular/* packages and deleting/re-creating the @ag-grid package folders in node_modules did the error go away.

Here's a link to my package.json: https://stackblitz.com/edit/ag-grid-angular-hello-world-mnmfpr?file=package.json

Answer 3

Just wanted to let those facing a similar issue with Ag-Grid-React (my clipboard context menu would refuse to recognize and display the Copy and Copy with Headers options), do the same as the accepted answer on this thread, i.e.:

Instead of using

import {AgGridReact} from 'ag-grid-react'; 
import 'ag-grid-enterprise';

Use the below

import {AgGridReact} from "@ag-grid-community/react";
import {AllModules} from "@ag-grid-enterprise/all-modules";

An example of the correct usage can be found here: https://www.ag-grid.com/javascript-grid-clipboard/

You will need to install @ag-grid-community/react and @ag-grid-enterprise/all-modules as separate NPM packages if you are using "import { AgGridReact } from 'ag-grid-react';"

Answer 4

If you are registering modules manually you have to add ClipboardModule to have Copy option available.

port {ClipboardModule} from "@ag-grid-enterprise/all-modules";

ModuleRegistry.registerModules([ClipboardModule])