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!

score 28 · Answer 1 · edited Aug 03 '17 at 18:55

28

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.

edited Aug 03 '17 at 18:55

Joshua

3,261
2
19
33

answered Aug 02 '17 at 17:29

Vinod Tanguturi

281
3
5

Had to change the selector to .ag-cell-not-inline-editing and it works – Spikolynn Mar 24 '21 at 15:45

score 20 · Answer 2 · edited Jun 14 '19 at 18:40

20

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.

edited Jun 14 '19 at 18:40

Zoe

23,712
16
99
132

answered Jun 14 '19 at 18:38

Vladi

354
3
10

This allows the cells to be copied, but not the headers – ChrisMcQueen Nov 28 '19 at 10:51
This should be the answer – karthikdivi May 24 '20 at 12:00

score 4 · Answer 3 · answered Apr 07 '16 at 13:57

4

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

answered Apr 07 '16 at 13:57

RegRog

363
2
11

score 1 · Answer 4 · answered Apr 10 '17 at 22:09

1

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

answered Apr 10 '17 at 22:09

AlexO

948
8
15

3

The downside of this being that now your users can edit cell content. My guess is most folks will want the ability to highlight and Ctrl+C the text without having to enable editing. – MegaMatt Jun 07 '19 at 18:28
Enable "EDIT" cell content may cause side effects, this is not strongly recommended. – LHCHIN Aug 15 '19 at 07:23

score 0 · Answer 5 · edited May 23 '17 at 10:30

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.

score 0 · Answer 6 · answered Dec 10 '19 at 16:38

0

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

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

answered Dec 10 '19 at 16:38

Jay

399
3
18

This does not work now either, tested on AG-Grid community 22.0.0. – Jeff7566 Apr 29 '20 at 02:30

score 0 · Answer 7 · answered Jun 29 '20 at 16:31

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.

i tried to copy entire ag grid table to clipboard ,but it is copied only headerof the table . my code is this.gridApi.copySelectedRowsToClipboard(this.props.data) // this.props.data have array ag grid data — John Ken, Apr 05 '21 at 06:38

score 0 · Answer 8 · answered Sep 21 '20 at 10:20

0

Hope this will work for

[enableCellTextSelection]="true"

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

answered Sep 21 '20 at 10:20

Mohit Savaliya

11
4

how to copy the values present in ag-grid

8 Answers8

Linked