how to copy the values present in ag-grid

问题

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!

回答1:

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.

回答2:

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.

回答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

回答4:

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

回答5:

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.

回答6:

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

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

来源：https://stackoverflow.com/questions/35721419/how-to-copy-the-values-present-in-ag-grid

标签

angularjs

angularjs-directive

angular-ui-router