Demo - Clipboard

by Troy Taylor

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">

  <h1>
    Clipboard
  </h1>
  <p>
    The <b>Clipboard</b> class allows you to customize the
    behavior of the clipboard by modifying its contents using
    the static methods <b>copy</b> and <b>paste</b>.</p>
  <p>
    Note that the <b>Clipboard</b> class cannot initiate 
    clipboard operations; it can only modify the contents of 
    the clipboard after an operation has been initiated by a user.</p>
  <p>
    This example customizes <b>copy</b> operations from a 
    FlexGrid by adding column headers to the clipboard content. 
    To see how it works, copy a range from the FlexGrid and paste 
    into an Excel sheet.
  </p>
  
  <button id="copyButton" onclick="copyToClipboard()">
  Copy to Clipboard
  </button>
  <label>
    Include Headers
    <input id="includeHeaders" type="checkbox" checked="true">
  </label>
  
  <div id="theGrid">
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 350px;
}

JavaScript

var theGrid, hasHeaders;

function copyToClipboard() {
	var includeHeaders = document.getElementById('includeHeaders').checked;
  if (includeHeaders) {
    var text = theGrid.getClipString(),
        sel = theGrid.selection,
        hdr = '';
    for (var c = sel.leftCol; c <= sel.rightCol; c++) {
      if (hdr) hdr += '\t';
      hdr += theGrid.columns[c].header;
    }
    text = hdr + '\r\n' + text;
  
  /* try{
    var successful = document.execCommand('copy'); 
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('Copy email command was ' + msg);
    
    // put text with headers on the clipboard
    wijmo.Clipboard.copy(text);
    hasHeaders = true;
  } catch(err) {  
    console.log('Oops, unable to copy');  
  } */
   var input = document.createElement('textarea');
   document.body.appendChild(input);
   input.value = text;
   input.select();
   document.execCommand('copy');
   document.body.removeChild(input);

    console.log(text);
  }
}

onload = function() {

	// create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
		  data = [];
	for (var i = 0; i < countries.length; i++) {
		data.push({
			id: i,
			country: countries[i],
			downloads: Math.round(Math.random() * 20000),
			sales: Math.random() * 10000,
			expenses: Math.random() * 5000
		});
	}

	// show the data in a grid
	hasHeaders = false;
	theGrid = new wijmo.grid.FlexGrid('#theGrid', {
		itemsSource: data,
		copying: function(s, e) { // // add headers to clip string
			hasHeaders = false;
			var includeHeaders = document.getElementById('includeHeaders').checked;
			if (includeHeaders) {
				var text = s.getClipString(),
				    sel = s.selection,
				    hdr = '';
				for (var c = sel.leftCol; c <= sel.rightCol; c++) {
					if (hdr) hdr += '\t';
					hdr += s.columns[c].header;
				}
				text = hdr + '\r\n' + text;

				// put text with headers on the clipboard
				wijmo.Clipboard.copy(text);
				hasHeaders = true;

				// prevent the...