Clipboard Support

The FlexGrid control 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.

You can disable the automatic clipboard support by setting the autoClipboard property to false.

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.

Use the copyHeaders property to control whether the grid should include header cells when copying the content to the clipboard. This is especially useful in read-only grids.

Learn about FlexGrid | FlexGrid API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import { FlexGrid, HeadersVisibility } from '@mescius/wijmo.grid'; 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 grid = new FlexGrid('#theGrid', { autoGenerateColumns: false, itemsSource: data, columns: [ { binding: 'id', header: 'ID', isReadOnly: true }, { binding: 'country', header: 'Country' }, { binding: 'active', header: 'Active' }, { binding: 'downloads', header: 'Downloads' }, { binding: 'sales', header: 'Sales' }, { binding: 'expenses', header: 'Expenses' } ], copying: function (s, e) { var selRng = grid.selection, readOnlyCells = []; // check if cells in the selected range are read only for (var row = selRng.topRow; row <= selRng.bottomRow; row++) { for (var col = selRng.leftCol; col <= selRng.rightCol; col++) { var cell = grid.cells.getCellElement(row, col); if (cell && grid.columns[col].isReadOnly) readOnlyCells.push({ row: row, col: col }); } } // show popup if a cell read-only is selected if (readOnlyCells.length > 0) { var popup = document.getElementById('thePopup'); popup.classList.add('add-popup'); setTimeout(function () { popup.classList.remove('add-popup'); }, 3000); } } }); // read-only, copy headers as well as data new FlexGrid('#theCustomGrid', { copyHeaders: HeadersVisibility.Column, isReadOnly: true, alternatingRowStep: 0, itemsSource: data }); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo FlexGrid Clipboard</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <h2> Default Grid </h2> <p> Copy and paste cell ranges like in Excel. During copying, a notification, similar to Excel, will pop up to indicate the process of copying cell ranges. </p> <div id="theGrid"></div> <div id="thePopup" class="popup"> Some cells you are pasting are readonly and will not be updated. All other cells will be updated with pasted content. </div> <h2> Read-Only Grid </h2> <p> Copy data and column header information (pasting not allowed). </p> <div id="theCustomGrid"></div> </div> </body> </html>
.wj-flexgrid { max-height: 200px; margin-bottom: 12px; } .popup { display: none; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #FFFFE0; border: 1px solid rgb(224, 217, 217); position: fixed; z-index: 1; } .add-popup { display: block; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);