How can I get the text displayed in a data label to be selectable with my mouse so that my users can copy it for use elsewhere?
I had no problem getting it to make a URL live so that it can be clicked, but I cannot find anything related to making text selectable (i.e., highlight it with the mouse).
Hello @ken,
Please find below the script. I’ve added this script on context menu showing (right click interaction). This script is adding a new item in the context menu but it is not highlighting the text. Also, using this script you will copy the entire text of the element but with some adjustments, based on your requirements, you can define specific cases.
var commands = e.originalEvent.commands;
for (i = commands.length-1; i>=0; i–)
{
commands.splice(i,1);
}
var customCommandItem = new dundas.Command(
{
id: dundas.Utility.createGuid(),
caption: ‘Copy Text’,
categoryName: ‘Copy Text’,
description: ‘CCopy Text’,
editModeOnly: false,
imageUrl:’/Content/Images/icons/contextMenu/d1.png’,
action: function()
{
var x=dataLabel4.container.textContent;
function copyToClipboard(text) {
var dummy = document.createElement(“textarea”);
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand(“copy”);
document.body.removeChild(dummy);
}
copyToClipboard(x);
e.originalEvent.commands.splice(0,e.originalEvent.commands.length);
alert(“Text copied!”);
}
});
commands.push(customCommandItem);
Thanks, that worked. Well, kinda…
I tried using it in the context menu but I couldn’t get the script to build.
Instead, I broke out the text I want to be copy-able into a new data label, and used this segment of code in the click event script:
var text = dataLabel4.container.textContent;
var dummy = document.createElement(“textarea”);
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
document.execCommand(“copy”);
document.body.removeChild(dummy);
Works like a charm.