Clipboard Support

The FlexGrid has built-in clipboard support. By default, pressing the ctrl+c or ctrl+Insert keys copies the current selection to the clipboard. Pressing ctrl+v or shift-Insert pastes the clipboard content into the grid. You can customize the clipboard actions using the copying, copied, pasting, pasted, pastingCell, and pastedCell events. Note that the FlexGrid implements an Excel-style 'smart pasting' feature that replicates the clipboard data when pasting. For example, if you select a single cell and press ctrl+c to copy it to the clipboard, then extend the selection and press ctrl+v to paste, the cell will be pasted over the entire selection.

import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import * as wjCore from '@grapecity/wijmo'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // create some random data var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','); var data = []; for (var i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } // // default clipboard behavior var theGrid = new wjGrid.FlexGrid('#theGrid', { alternatingRowStep: 0, itemsSource: data, }); // // custom clipboard behavior var theCustomGrid = new wjGrid.FlexGrid('#theCustomGrid', { alternatingRowStep: 0, itemsSource: data, copying: function (s, e) { var text = s.getClipString(); var sel = s.selection; var 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 wjCore.Clipboard.copy(text); // // prevent the grid from overwriting our clipboard content e.cancel = true; }, pasting: function (s, e) { e.cancel = true; // prevent pasting data with headers } }); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Clipboard</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div id="theGrid"> </div> <h2>Custom Behaviors</h2> <div id="theCustomGrid"> </div> </div> </body> </html> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import { Component, enableProdMode, NgModule } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { WjGridModule } from '@grapecity/wijmo.angular2.grid'; import * as wjcCore from '@grapecity/wijmo'; import * as wjcGrid from '@grapecity/wijmo.grid'; @Component({ selector: 'app-component', templateUrl: 'src/app.component.html' }) export class AppComponent { data: any[]; constructor() { this.data = this._getData(); } initializeCustomGrid(flex: wjcGrid.FlexGrid) { flex.copying.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.CellRangeEventArgs) => { // // add headers to clip string let text = s.getClipString(), sel = s.selection, hdr = ''; for (let 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 wjcCore.Clipboard.copy(text); // prevent the grid from overwriting our clipboard content e.cancel = true; }); flex.pasting.addHandler((s: wjcGrid.FlexGrid, e: wjcGrid.CellRangeEventArgs) => { e.cancel = true; // prevent pasting data with headers }); } private _getData() { // create some random data let countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } return data; } } @NgModule({ imports: [WjGridModule, BrowserModule], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } enableProdMode(); // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Clipboard</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component'); }); </script> </head> <body> <app-component></app-component> </body> </html> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid #flex [alternatingRowStep]="0" [(itemsSource)]="data"> </wj-flex-grid> <h2>Custom Behaviors</h2> <wj-flex-grid #customFlex [alternatingRowStep]="0" [(itemsSource)]="data" (initialized)="initializeCustomGrid(customFlex)"> </wj-flex-grid> </div> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } <template> <div class="container-fluid"> <!-- the grid --> <wj-flex-grid :alternatingRowStep="0" :itemsSource="data" ></wj-flex-grid> <h2>Custom Behaviors</h2> <wj-flex-grid :alternatingRowStep="0" :itemsSource="data" :initialized="initializeCustomGrid" ></wj-flex-grid> </div> </template> <script> import "@grapecity/wijmo.styles/wijmo.css"; import "bootstrap.css"; import Vue from "vue"; import "@grapecity/wijmo.vue2.core"; import "@grapecity/wijmo.vue2.grid"; import { getData } from "./data"; let App = Vue.extend({ name: "app", data: function() { return { data: getData() }; }, methods: { initializeCustomGrid: function(flex) { flex.copying.addHandler((s, e) => { // // add headers to clip string let text = s.getClipString(), sel = s.selection, hdr = ""; for (let 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); // prevent the grid from overwriting our clipboard content e.cancel = true; }); flex.pasting.addHandler((s, e) => { e.cancel = true; // prevent pasting data with headers }); } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script> <style> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } </style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Clipboard</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/jszip/dist/jszip.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); </script> </head> <body> <div id="app"> </div> </body> </html> export function getData() { // create some random data let countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } return data; } import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './app.css'; // import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as wjGrid from '@grapecity/wijmo.react.grid'; import * as wjcCore from '@grapecity/wijmo'; import { getData } from './data'; class App extends React.Component { constructor(props) { super(props); this.state = { data: getData() }; } render() { return <div className="container-fluid"> <wjGrid.FlexGrid alternatingRowStep={0} itemsSource={this.state.data}> </wjGrid.FlexGrid> <h2>Custom Behaviors</h2> <wjGrid.FlexGrid alternatingRowStep={0} initialized={this.initializeCustomGrid.bind(this)} itemsSource={this.state.data}> </wjGrid.FlexGrid> </div>; } initializeCustomGrid(flex) { flex.copying.addHandler((s, e) => { // // add headers to clip string let text = s.getClipString(), sel = s.selection, hdr = ""; for (let 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 wjcCore.Clipboard.copy(text); // prevent the grid from overwriting our clipboard content e.cancel = true; }); flex.pasting.addHandler((s, e) => { e.cancel = true; // prevent pasting data with headers }); } } ReactDOM.render(<App />, document.getElementById('app')); <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>GrapeCity Wijmo FlexGrid Clipboard</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div id="app"></div> </body> </html> .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } body { margin-bottom: 24px; } export function getData() { // create some random data let countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark'.split(','), data = []; for (let i = 0; i < countries.length; i++) { data.push({ id: i, country: countries[i], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.random() * 100000, expenses: Math.random() * 50000 }); } return data; }