how to copy the values present in ag-grid

Question

I am using ag-grid to bind values from a list, Is it possible to copy the value/data in the selected cell. I have tried to copy the value using ctrl+c but its not working is there any other way?

Please help me!

Answer 1

There is a flag which will allow you to select text and then CTRL+C will work.

enableCellTextSelection=true

This is not an enterprise config and can be at any time to enable cell text selection.

Answer 2

You can do this using CSS below:

.ag-font-style {
  user-select: initial;
  -moz-user-select: text;
  -ms-user-select: text;
  -webkit-user-select: text;
}

This should work in any of the browsers viz IE, Chrome, Mozilla and may be Safari.

Answer 3

Many users are asking for this feature:

https://github.com/ceolter/ag-grid/issues/87

Anyway copy-paste features seems active only in enterprise version:

https://www.ag-grid.com/angular-grid-context-menu/index.php

Answer 4

if you using angular, add this module in your module ModuleRegistry:

import { ClipboardModule } from "@ag-grid-enterprise/clipboard";
public modules: ModuleRegistry[] = [
   ClipboardModule
];

Answer 5

In the column definitions, set editable = true, for example:

const columns = [{
    headerName: "Name",
    field: 'name',
    width: 150,
    editable: true
}];

Double-clicking on a cell brings up an editor with the current text pre-selected, which can be copied out with Ctrl + C.

See: Cell Editing Documentation

Answer 6

Yes. They have API methods to access the grids built-in clipboard. I have recently implemented this into my own grid.

In the onCellFocussed event I am saving the most recent focus column to a member variable:

onCellFocused(event: CellFocusedEvent) {
    this.lastFocusColumn = [event.column]

This needs to be wrapped in an array for the correct type. Then in your onCopy() handler (the function that gets called when CTRL+C is press or copy is selected from the context menu):

onCopy(){
   this.gridOptions.api.copySelectedRowsToClipboard( false, this.lastFocusColumn )

The first argument is whether or not you want headers to be copied, which in my case and I think yours, should be set to false.

Answer 7

Hope this will work for

[enableCellTextSelection]="true"

<ag-grid-angular #agGrid [enableCellTextSelection]="true" [columnDefs]="columnDefs" [defaultColDef]="defaultColDef" [rowData]="xdrData"></ag-grid-angular>

Answer 8

This is dscribed in the official documentation.

If you want to use a regular text selection as if the grid were a regular table, set enableCellTextSelection=true and ensureDomOrder=true in the gridOptions.

https://www.ag-grid.com/javascript-data-grid/selection-overview/

Answer 9

I have solved this issue by creating generic directive which copies the text in specified css selector on to clipboard upon clicking ctrl+c.

this answer helped me at lot.

Here is my html:

<div copiable selector=".ag-cell-focus">
    <div  ag-grid="gridOptions" class="ag-bootstrap"></div>
</div>

Here is the directive code:

// keys: 17 - ctrl, 67 - c
angular.module('common').directive('copiable', function () {
    return function (scope, element, attrs) {
        var ctrlDown = false;
        element.bind("keydown", function (event) {
            if(event.which === 17) {
                ctrlDown = true;
            } else if (event.which == 67 && ctrlDown == true) {
              var text = angular.element(attrs.selector).text();
              console.log("selected text for ctrl+c", text);
              if (window.clipboardData && window.clipboardData.setData) {
                // IE specific code path to prevent textarea being shown while dialog is visible.
                return clipboardData.setData("Text", text); 

              } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
                var textarea = document.createElement("textarea");
                textarea.textContent = text;
                textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
                document.body.appendChild(textarea);
                textarea.select();
                try {
                    return document.execCommand("copy");  // Security exception may be thrown by some browsers.
                } catch (ex) {
                    console.warn("Copy to clipboard failed.", ex);
                    return false;
                } finally {
                    document.body.removeChild(textarea);
                   ctrlDown = false;
                }
              }     
            }
        });
    };
})

Note: I couldn't get keyup event to work so end up setting ctrlDown to false in finally.

Answer 10

Unfortunately Vinod's CSS fix no longer works. This does:

.ag-theme-balham.ag-unselectable {
  -webkit-user-select: text !important;
  user-select: initial !important;
}

Answer 11

You have to use ::ng-deep along with .ag-unselectable for community edition

::ng-deep .ag-unselectable {
   -moz-user-select: text;
   -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

for Enterprise edition you may check - Clipboard

Answer 12

TS

gridOptions: GridOptions = {
    ...
    enableCellTextSelection: true,
};

HTML

<ag-grid-angular
...
[gridOptions]="gridOptions"
...></ag-grid-angular>