Copy NSB Grid Data To Clipboard

1

Hi, as the stated in the topic title I want to copy all data from an NSB grid to clipboard. I’m stuck at this point.

Function Button39_onclick()
Grid1.    ??????
document.execCommand("Copy")  
End Function

Thanks
Will.

2

Are you trying to keep the grid format, or just copy the contents?

Here is what I would start with (javascript):

var myGrid = getElementById("Grid1");
myGrid.select();
document.exeCommand("Copy");

Not sure if this will work, but there are examples out there online, and here is an old answer which is still getting updates:
https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript

3

Hi, thanks for getting back to me, I’m just interested in copying the data from the grid to clipboard. Thanks for the link. I’ll have a look at that now :+1:

4

I forgot to mention that I did have a play with the code you gave me (Which is pretty much the same as some of the examples in the link you posted). I changed to Basic:

 Dim myGrid

 Function Button39_onclick()
    myGrid = document.getElementById("Grid1") 
    myGrid.select()
    document.exeCommand("Copy")
 End Function

The result was this:

code.js:555 Uncaught TypeError: myGrid.select is not a function
    at HTMLButtonElement.Button39.onclick (code.js:555)

Lots of other examples to go through so I’ll have another go tomorrow.
Thanks
Will.

5

The select() function only applies to certain types of controls: input, textarea, etc. The cells in a Grid are actually div elements.

Here’s a StackOverflow article on how to copy from a div:

1 Like
6

OK, I whipped up a sample this morning using the Grid found in the “Common” controls. Here is what I did (javascript):

//Returns a string of cell data with comma
function getGridData(gridElement){
  let noCols = gridElement.getColCount();
  let noRows = gridElement.getRowCount();
  let data = '';
  
  for(var row = 0; row < noRows; row++){
for(var col = 0; col < noCols; col++){
  data += gridElement.getValue(row,col) + ',';
  }
}

return data.substring(0, data.length -1);
}

btnCopy.onclick=function(){
  var gridElement = document.getElementById("Grid1");
  var theData = getGridData(gridElement);
  
  //Create dummy element to store data for clipboard
  var dummy = document.createElement('input');
  document.body.appendChild(dummy);
  dummy.setAttribute('id', 'dummy_id');
  dummy.setAttribute('value', theData);
  document.getElementById('dummy_id');
  dummy.select();
  document.execCommand("Copy");
  document.body.removeChild(dummy);
}
1 Like
7

Hey Buck, You just caught me as I was about to post a solution, I just had a look at some of the samples that George gave me a link to. I found this one that works really nice. Just built a native Android app and it works really well. It just drops straight into google sheets and Excel and looks as per the grid if emailed. (In Basic)

Dim range

Function Button39_onclick()
range = document.createRange()
range.selectNode(document.getElementById("Grid1"))
window.getSelection().removeAllRanges()
window.getSelection().addRange(range)
document.execCommand("copy");
window.getSelection().removeAllRanges()
NSB.MsgBox("Data Copied")
End Function

Thanks for your Time Buck.

8

Thanks George.

9

Excellent. I also followed the link from George and found this solution:

https://clipboardjs.com/

Just add a class to your control, then I put the code below in an init function, and it works like a charm if you need to do this to more than one control/element (it also maintained the rows and columns):

function initForm1(){
  loadGrid();
  
  //Bind clipboard.js to any control with class 'btnCopy'
  var clipboard = new ClipboardJS('.btnCopy');
  
  //Create new data attribute
  var copyAttribute = document.createAttribute('data-clipboard-target');
  copyAttribute.value = '#Grid1';
  
  //Grab our DOM element
  var btnClip = document.getElementById('btnClippy');
  btnClip.setAttributeNode(copyAttribute);
  
  //Callbacks to see results (optional)
  clipboard.on('success', function(e) {
    console.log(e);
  });

  clipboard.on('error', function(e) {
      console.log(e);
  });
}
10

Hi Buck, I had a quick go at converting that to Basic but I messed up somewhere. As I’ve got quite a lot of text inTextarea that I also need to copy as well as my Grid data, I used the first piece of code that You sent to me. The only problem I found was that after the text was copied is that the text remained highlighted/selected. To solve that I used this line of code after the copy event:

window.getSelection().removeAllRanges()

So for copy to clipboard for Input or Textarea I use this (Basic)

  Dim TxtA

 Function Button39_onclick()
 TxtA = document.getElementById("Textarea33") 
 TxtA.select()
 document.execCommand("copy")
 window.getSelection().removeAllRanges()
 NSB.MsgBox("Data Copied")
 End Function

Works Nice.

11

You can make it a little bit better. The code

TxtA = document.getElementById("Textarea33")
TxtA.select()

is the same as doing this:

Textarea33.select()
12

Oh yes, I can see that now.
Thanks George. :+1: