Forums Home / Wijmo / General Discussion
Posted by: postmastery on 14 September 2017, 11:27 am EST
postmastery
Posted 14 September 2017, 11:27 am EST
I want to allow users to copy FlexGrid cell content to the clipboard. However selection of content with the cursor does not work when isReadOnly is set to true.
When isReadOnly is set to false and selectionMode is set to Cell, it is possible to select cell content by using the edit mode. But I don’t want to allow editing.
How can I allow users to “open” a grid cell for copying, but prevent changes to the content?
I am using Wijmo 5 with Angular.
abdiasm
Posted 14 September 2017, 11:27 am EST
The FlexGrid doesn’t have to enter edit mode to copy data to the clipboard. Even if ‘isReadOnly’ is set to true and selectionMode set to ‘Cell’, the cell’s data can be copied by pressing Ctrl + C without having to enter the edit mode.
[html][/html]
Let me know if you’re facing any issues with this
postmastery
Posted 14 September 2017, 11:27 am EST
I tried that, but it doesn’t work. When I click and move in the table nothing is selected. Only when I click at the top left or right bottom of the table I can start a selection. But then the whole table is selected.
abdiasm
Posted 14 September 2017, 11:27 am EST
Sorry, I couldn’t reproduce the behavior at my end. I am able to select and copy the cell data from FlexGrid. Attaching a gif video and the sample page as well.
Please take a look. Let me know if you can reproduce the issue with the attached sample page or if I’m missing anything.
2015/12/FlexGrid_ReadOnly_CopyPaste.gif
postmastery
Posted 14 September 2017, 11:27 am EST
Thank you for your quick reply. There is a lot going on I noticed.
First of all, with “select and copy” I expected to be able to click and drag over text in the table. That doesn’t work with the way the tables are created from divs.
The Cell selection mode does work, but it is just a single click on a cell and it changes the background color of the complete cell. Also, the cell selection remains active after focus changes to another element on the page. Finally on my Mac, the Cmd+C does copy the cell content in Chrome, but it does not work in Safari.
The closest to what I want is to use the attributes you suggested and change the styling to highlight only the text in the cell (which I wrapped in a span to create an inline element).
[css]
.wj-state-selected {
background-color: inherit; /* default #0085c7 */
color: inherit;
}
.wj-state-selected span {
background-color: #B0D7FE;
}
[/css]
abdiasm
Posted 14 September 2017, 11:27 am EST
That is how FlexGrid is designed; the text is displayed inside div elements in a cell so the entire cell gets highlighted on selection. You can try adding the span element as you’ve mentioned and see if it works for you.
Regarding the issue where cmd+c doesn’t copy the text in Safari on a Mac, I could also reproduce it at my end. It could be a bug and I’m going to forward it to the concerned team for further review. Will let you know once I have an update on this. The tracking id for your issue is 139184
Regards
postmastery
Posted 14 September 2017, 11:27 am EST
Also note that Ctrl+C or Cmd+C only works on the cell that has focus. I have multiple tables on a page, and each table can have a “selected” cell.
I added the “:focus” restriction to the highlight CSS to make this more intuitive.
[css]
.wj-state-selected:focus span,
.wj-state-selected span:focus {
background-color: #b0d7fe; /* text selection color */
}
[/css]
Thank you for creating a ticket for the Safari issue.
abdiasm
Posted 14 September 2017, 11:27 am EST
Glad to know that you have a workaround for highlighting the cell text.
I’ll get back to you about the text not getting copied in Safari as soon as I have an update.
manish.gupta
Posted 27 February 2018, 7:55 am EST
Hi,
We are sorry for the late reply.
This issue has been fixed in the build 5.20173.409.
~Manish
rishabh.jain
Posted 11 August 2020, 3:49 am EST
Hi Guys,
I am using C1.Blazor.FlexGrid component but is not able to copy the cell content even when I have SelectionMode=“GridSelectionMode.Cell”
Please help me for this issue.
ashwin.saxena
Posted 12 August 2020, 7:52 am EST
Hi Rishabh,
This thread is for Wijmo’s FlexGrid but you are using Blazor’s FlexGrid. The Blazor’s FlexGrid is a fairly new control and copy/paste functionality is not added to it.
We have added an enhancement request for the same with internal tracking id 457283. We will update you once this feature is implemented.
Regards,
Ashwin
