Copy/paste doesn't work

[provegard]

Trying out SlickGrid, went for the copy/paste example:

http://mleibman.github.com/SlickGrid/examples/example-spreadsheet.html

Pasting from Excel using Ctrl-V doesn't work. Tested in Firefox, Chrome and IE9.

Copying from SlickGrid into Excel also doesn't work.

[mckramer]

The copy/paste functionality in that example is for use on the grid itself. If you want to copy the cells to the clipboard, then try using ZeroClipboard (or Clippy if you prefer).

You do not have direct access to the clipboard through JS alone. (In the modern browsers.)

[provegard]

Thanks, I know about ZeroClipboard and browser limitations. I was looking for creative workarounds (like Handsontable does).

[tmcconechy]

I was able to get this to work in a similar manner to http://www.developerextensions.com/index.php/extjs-excel-copypaste-grid by looking at their code. The idea is that on key-down direct focus to an invisible text area which contains tab delimited cell data which can be copied in and out of excel.

[Celebio]

@provegard I think my plugin may be helpful : http://labs.nereo.com/slick.html
The corresponding pull request : #480

[provegard]

@tmcconechy I currently use Handsontable, and it does exactly that.

@Celebio Unfortunately not. 90% of my users have no idea what Ctrl-V is. They want to right-click and select Paste... So my current workaround is edit-on-select. It gives the user a working Paste menu in any browser, and then I can detect tabular data and expand it into the table.

[Celebio]

Indeed my plugin is aimed to be low level and non-intrusive, thus does not contain any UI element. I prefer to let developers use their prefered UI library for such things.
Handsontable probably uses the same trick than my externalcopymanager, the only difference is that you can use slickgrid (and every nice things that come with).

[alexcroox]

I achieved copy to system clipboard in the following simple way:

var ctrlDown = false,
ctrlKey = 17,
cmdKey = 91,
cKey = 67;

// Listen for CTRL or CMD key presses
$(document).keydown(function(e) {
    if (e.keyCode == ctrlKey || e.keyCode == cmdKey)
        ctrlDown = true;
}).keyup(function(e) {
    if (e.keyCode == ctrlKey || e.keyCode == cmdKey)
        ctrlDown = false;
});

// Combine the CTRL/CMD key press with C and we are ready to copy
$('.slick-viewport').keydown(function(e) {
    if (ctrlDown && (e.keyCode == cKey) && $('.slick-cell.active').length) {
        copyTextToClipboard($('.slick-cell.active').html());
    }
});

function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");

    // Place in top-left corner of screen regardless of scroll position.
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;

    // Ensure it has a small width and height. Setting to 1px / 1em
    // doesn't work as this gives a negative w/h on some browsers.
    textArea.style.width = '2em';
    textArea.style.height = '2em';

    // We don't need padding, reducing the size if it does flash render.
    textArea.style.padding = 0;

    // Clean up any borders.
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';

    // Avoid flash of white box if rendered for any reason.
    textArea.style.background = 'transparent';

    textArea.value = text;

    document.body.appendChild(textArea);

    textArea.select();

    try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copying text command was ' + msg);
    } catch (err) {
        console.log('Oops, unable to copy');
    }

    document.body.removeChild(textArea);
}

[6pac]

my new master https://github.com/6pac has a fully developed plugin for this based on @Celebio's, with additional bug fixes.

see http://6pac.github.io/SlickGrid/examples/example-excel-compatible-spreadsheet.html

[alexcroox]

Ah very nice, is there a way to disable pasting back into the grid, e.g read only but with copy functionality still active?

[6pac]

not at present, but that flag would be very easy to insert

[6pac]

added plugin option 'readOnlyMode' in the latest push

[aniketng765]

how to disable paste for single column, selectable : false worked when i tried to paste for single column.
but when i copy data from two columns and try to paste on column besides the one having selectable : false, it allows to paste.

[6pac]

should probably have a 'AllowPaste' option for columns - I don't think [cannot select] always means [cannot paste]. Note comment above about the new master repo. Nothing is going to happen here.

[6pac]

The above about AllowPaste was only a suggestion for a possible fix. It is now implemented as colDef.denyPaste: see #1196