Demo - Clipboard

by Joel Parks

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>

  <label>
    Include Headers
    <input id="includeHeaders" type="checkbox" checked="true">
  </label>
  <div id="theGrid">
  </div>
</div>

CSS

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

JavaScript

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
	var hasHeaders = false;
	var 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 grid from overwriting our clipboard content
        e.cancel = true;
			}
		},
		pasting: function(s, e) { // prevent pasting content with headers...
    	console.log(s);
			if (hasHeaders) {
				e.cancel = true;
			}
		}
	});
}