Select cells and copy to clipboard #3695
Comments
|
This would be a nice enhancement. I haven't personally looked at how to intercept the ctrl-c action, I know that most browsers prohibit interaction with the clipboard, which is why exporter couldn't export to clipboard. So long as there's some way to know that a ctrl-c is going on and run code, then working out selected cells and formatting them would be possible. A pull request would be welcomed. |
|
Here is a rough proof of concept: |
|
I've forked, cloned and tried to work on this but I don't think I'm the right person for the task but I can maybe help in the discussion. Basically this won't be affected by javascripts inability to access the clipboard because CTRL+C will copy whatever is selected. It's just a matter of putting all selected cells into an invisible text area as @AgDude mentions in 3714. I have worked with clipboard injection multiple times and it is possible but it is an external dependency, in fact it actually requires adobe flash, the node package is ng-clipboard. I use it here: http://juliusakula.github.io/editor/#/ (green button) And I've used to copy grid data, as well. From that experience I can tell you Tab-delimited columns, and newline-delimited rows are much better than html for pasting into excel, even if the html is tables and not divs. With tables the destination formatting is automatically overwritten, and also it seems like excel has to spend time parsing it and that can take upwards of 20 seconds depending on the size of the pasted data, this is not a problem when the data is simply tab delimited. I can paste my code for copying ALL grid data directly to clipboard (external dependency, though), but I'm not sure the solution for copying only the selected data. With an invisible text area we could avoid that external dependency. |
|
@juliusakula if you are looking for a solution right now, I think you could use the example in the linked plunker along with the row selection feature to copy complete rows. I'll take on this project, but it may be few weeks or more before I get to it. For this feature be really useful we are going to need to expand support for keyboard and mouse events within the grid. We will not be able to support a button to copy to clipboard, or using the native menus (we should be able warn the user if they try using a native copy). Making the keyboard feel natural to users is going to be important. Selection of a cell range with mouse drag/shift-click is going to be expected also. |
AgDude
changed the title
|
I had a couple thoughts this morning on better support for native clipboard operations. One is that we can keep focus on the textarea and update the contents any time the selection changes. We should also look at how github implements the copy icon next to all of their command line instructions. |
|
@AgDude They use a little shockwave tool called Zero Clipboard: https://github.com/zeroclipboard/zeroclipboard |
|
Thanks @c0bra. I have seen that tool before. I don't think we want the put that directly into uiGrid, but making sure we can support it, and putting a reference to it in the docs would make sense. |
|
Native clipboard operations are going to much more useful and user friendly than a copy-to-clipboard button, but a reference in the docs to zero-clipboard would make sense. |
|
We should also support clicking a column or row header to select the cells in that row/column. |
|
How do you differentiate that behavior from clicking the header to sort or move the column header? |
|
^ I'd say if Select Cells was a column menu item instead, that would work. Clicking to sort is the standard expectation. |
|
@juliusakula Native clipboard ops has very little support currently: http://caniuse.com/#feat=clipboard |
|
@AgDude is their any progress with this feature. I was finding something where I can select column or row header , copy and paste it to Excel. |
|
This answer on stackoverflow seems to indicate that improvements in clipboard manipulation have been made for the largest browsers: IE10+ Possibly that this is more possible now than it previously was? http://stackoverflow.com/a/30810322/1373905 Would love to have this feature. Reading http://caniuse.com/#feat=clipboard, seems that FireFox would be the biggest challenge? |
|
I created a rough custom directive for click+drag selecting an area of cells and copying them with ctrl+c. Does not have ctrl+click or shift+click. Will probably add them at a later time. It does require jQuery and cellNav enabled. http://plnkr.co/edit/mEyS1MqJIiRdDJHn5OI1?p=preview Plnkr seems to not be firing off some of the events needed for copying unless you click in the preview window to focus it. This does not occur outside of plnkr. Click inside the preview to focus, then click+drag to select an area of cells, then ctrl+c. Should be pastable into excel. Tested working in Chome, Firefox and IE10+. I don't think it works in Safari but I am not able to test that at the moment. Hopefully helpful for some. |
|
Made some improvements to custom cell selection I wrote and updated plnkr to latest UI-Grid. |
|
That's truly awesome .. I was doing some usability testing with your plunkr... select a header's text and drag it will start a highlight of the first row of grid items (cursor-selected text still possible (as in, select this text right now that's what I'm talking about), while simultaneously having the ui-grid blue background selected cell matrix feature activated. As a user who was about to copy to clipboard I asked myself which would go to my keyboard, the selected text or the activated selected cells -- and the selected text was apparently more important. So a css unselectable property would need to happen, like the headers already use in ui-grid I believe) -- also, the headers weren't selectable - only the data within, so anything pasted would be unlabeled |
|
@Atmos206 Thank you for the example. There's an issue with your plunkr where the first newline is missing from the copied data when selecting multiple cells as a single column. I solved it by changing the logic at line 259 of the directive. Fixed demo: http://plnkr.co/edit/yggCT28Z69adwWNEDk8u?p=preview |
|
@Atmos206 Thanks for your work on this. From a quick look at the plunker, this looks great! Once safari 10 is released, all major browsers will support the parts of the clipboard api you are using. http://caniuse.com/#feat=clipboard Given our policy on feature contributions, I think this belongs in an independent plugin. Please see the note in the readme for more deatils. I would personally be willing to help maintain it if you would like. When copy support makes it to the top of my TODO list, I will certainly use your approach as a starting point. |
|
@juliusakula Good point, will add in CSS to disable text selection on the headers with the plugin enabled. Will also look into setting up some options to enable/disable including column headers. Seems like something that should be available. @mccxiv Nice catch! Thanks very much for pointing that out! @AgDude My pleasure, glad it seems decent! Keeping it an independent plugin makes sense. I've checked out the section regarding plugins and the developer guideline. Would certainly like help maintaining. I will clean the plugin up to be more up to standard and start a repo for it. |
|
@Atmos206 Any luck setting up a repo/bower for your Plugin? It's a great feature |
|
@jlengwork I have been very busy recently but things have finally slowed down a bit for myself. Will do very soon! |
|
@Atmos206 your solution is so great!! Thank you very much ! :D |
|
Hi Atmos206, I noticed below, If I move from one cell to another by keyboard keys it shows first cell to be selected. The focus should move with the current cell. For example, if I click on CellA and by keyborad keys move on CellB, it still highlight CellA. It should move to CellB. |
|
Hello, |
|
It would be good it we can copy the column header too? Any plunker for that? When you use @Atmos206 code, you have to set rowTemplate:false in gridOptions, to work as desired. |
|
Hello All, Thanks in Advance. |
|
Hello All, I'm not able to drag and select all 50 rows, can you please help? |
|
Late to the party but is this going to be implemented? |
|
I created a git repo for the drag/drop cell selection (copy/paste rows) plugin I created: Feel free to contribute or log issues. Someone already added paste functionality and MacOS support! Will work it as time permits. Maybe it could go on the third party features page if the ui-grid peeps like it. |
|
I tried the github link, but i am not able to select any row or cell after implementing this. Anyone else facing the same problem? |
…rty list. Also, moving the thirdparty list to the bottom of the list near FAQs where it makes more sense. fix #3695
…rty list. Also, moving the thirdparty list to the bottom of the list near FAQs where it makes more sense. fix #3695
|
I added @Atmos206 plugin to the thirdparty list. |
For example: http://wijmo.com/demo/spreadjs/samples/ExplorerSample/?widget=Table&sample=Filter%20button%20visible
Above, you can click on a cell to select the data. If you ctrl+c, open excel and paste, it will fit into the one cell. If you select a matrix of 3x2, and paste into excel, it gets pasted as a 3x2 matrix. It's quite limiting in ui-grid to not be able to select just a few cells and press ctrl+c, I'm aware of the exporter features but sometimes you want to only select one cell, some cells in a row, or some rows. Maybe with jqLite it's possible to get the rendered data if a filter were applied instead of the raw data. (e.g. angular filter | number, etc)
This is either a new feature request or an enchancement on selection.. tutorials 202 and 210 seem to have the early makings for this
The text was updated successfully, but these errors were encountered: