The clipboard provides an option to copy selected rows or cells data into the clipboard.
The following list of keyboard shortcuts is supported in the Grid to copy selected rows or cells data into clipboard.
Interaction keys | Description |
---|---|
Ctrl + C | Copy selected rows or cells data into clipboard. |
Ctrl + Shift + H | Copy selected rows or cells data with header into clipboard. |
<template>
<div id="app">
<ejs-grid :dataSource='data' height='315px' :selectionSettings='selectionOptions'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
selectionOptions: { type: 'Multiple'}
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
});
To copy selected rows or cells data into clipboard with help of external buttons, you need to invoke the copy
method.
<template>
<div id="app">
<ejs-button id='copy' @click.native='copy'>Copy</ejs-button>
<ejs-button id='copyHeader' @click.native='copyHeader'>CopyHeader</ejs-button>
<ejs-grid ref='grid' :dataSource='data' height='280px' :selectionSettings='selectionOptions'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { data } from './datasource.js';
Vue.use(GridPlugin);
Vue.use(ButtonPlugin);
export default {
data() {
return {
data: data,
selectionOptions: { type: 'Multiple'}
};
},
methods: {
copy: function() {
this.$refs.grid.copy();
},
copyHeader: function() {
this.$refs.grid.copy(true);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.data = [
{
"OrderID":10248,
"CustomerID":"VINET",
"OrderDate":"1996-07-04T00:00:00.000Z",
"ShippedDate":"1996-07-16T00:00:00.000Z",
"Freight":32.38,
"ShipName":"Vins et alcools Chevalier",
"ShipAddress":"59 rue de l'Abbaye",
"ShipCity":"Reims",
"ShipRegion":null,
"ShipCountry":"France",
"Verified": true
},
{
"OrderID":10249,
"CustomerID":"TOMSP",
"OrderDate":"1996-07-05T00:00:00.000Z",
"ShippedDate":"1996-07-10T00:00:00.000Z",
"Freight":11.61,
"ShipName":"Toms Spezialitäten",
"ShipAddress":"Luisenstr. 48",
"ShipCity":"Münster",
"ShipRegion":null,
"ShipCountry":"Germany"
},
{
"OrderID":10250,
"CustomerID":"HANAR",
"OrderDate":"1996-07-08T00:00:00.000Z",
"ShippedDate":"1996-07-12T00:00:00.000Z",
"Freight":65.83,
"ShipName":"Hanari Carnes",
"ShipAddress":"Rua do Paço, 67",
"ShipCity":"Rio de Janeiro",
"ShipRegion":"RJ",
"ShipCountry":"Brazil",
"Verified": true
},
{
"OrderID":10251,
"CustomerID":"VICTE",
"OrderDate":"1996-07-08T00:00:00.000Z",
"ShippedDate":"1996-07-15T00:00:00.000Z",
"Freight":41.34,
"ShipName":"Victuailles en stock",
"ShipAddress":"2, rue du Commerce",
"ShipCity":"Lyon",
"ShipRegion":null,
"ShipCountry":"France",
"Verified": true
},
{
"OrderID":10252,
"CustomerID":"SUPRD",
"OrderDate":"1996-07-09T00:00:00.000Z",
"ShippedDate":"1996-07-11T00:00:00.000Z",
"Freight":51.3,
"ShipName":"Suprêmes délices",
"ShipAddress":"Boulevard Tirou, 255",
"ShipCity":"Charleroi",
"ShipRegion":null,
"ShipCountry":"Belgium"
},
{
"OrderID":10253,
"CustomerID":"HANAR",
"OrderDate":"1996-07-10T00:00:00.000Z",
"ShippedDate":"1996-07-16T00:00:00.000Z",
"Freight":58.17,
"ShipName":"Hanari Carnes",
"ShipAddress":"Rua do Paço, 67",
"ShipCity":"Rio de Janeiro",
"ShipRegion":"RJ",
"ShipCountry":"Brazil",
"Verified": true
},
{
"OrderID":10254,
"CustomerID":"CHOPS",
"OrderDate":"1996-07-11T00:00:00.000Z",
"ShippedDate":"1996-07-23T00:00:00.000Z",
"Freight":22.98,
"ShipName":"Chop-suey Chinese",
"ShipAddress":"Hauptstr. 31",
"ShipCity":"Bern",
"ShipRegion":null,
"ShipCountry":"Switzerland",
"Verified": true
},
{
"OrderID":10255,
"CustomerID":"RICSU",
"OrderDate":"1996-07-12T00:00:00.000Z",
"ShippedDate":"1996-07-15T00:00:00.000Z",
"Freight":148.33,
"ShipName":"Richter Supermarkt",
"ShipAddress":"Starenweg 5",
"ShipCity":"Genève",
"ShipRegion":null,
"ShipCountry":"Switzerland"
},
{
"OrderID":10256,
"CustomerID":"WELLI",
"OrderDate":"1996-07-15T00:00:00.000Z",
"ShippedDate":"1996-07-17T00:00:00.000Z",
"Freight":13.97,
"ShipName":"Wellington Importadora",
"ShipAddress":"Rua do Mercado, 12",
"ShipCity":"Resende",
"ShipRegion":"SP",
"ShipCountry":"Brazil"
},
{
"OrderID":10257,
"CustomerID":"HILAA",
"OrderDate":"1996-07-16T00:00:00.000Z",
"ShippedDate":"1996-07-22T00:00:00.000Z",
"Freight":81.91,
"ShipName":"HILARION-Abastos",
"ShipAddress":"Carrera 22 con Ave. Carlos Soublette #8-35",
"ShipCity":"San Cristóbal",
"ShipRegion":"Táchira",
"ShipCountry":"Venezuela"
},
{
"OrderID":10258,
"CustomerID":"ERNSH",
"OrderDate":"1996-07-17T00:00:00.000Z",
"ShippedDate":"1996-07-23T00:00:00.000Z",
"Freight":140.51,
"ShipName":"Ernst Handel",
"ShipAddress":"Kirchgasse 6",
"ShipCity":"Graz",
"ShipRegion":null,
"ShipCountry":"Austria"
},
{
"OrderID":10259,
"CustomerID":"CENTC",
"OrderDate":"1996-07-18T00:00:00.000Z",
"ShippedDate":"1996-07-25T00:00:00.000Z",
"Freight":3.25,
"ShipName":"Centro comercial Moctezuma",
"ShipAddress":"Sierras de Granada 9993",
"ShipCity":"México D.F.",
"ShipRegion":null,
"ShipCountry":"Mexico",
"Verified": true
},
{
"OrderID":10260,
"CustomerID":"OTTIK",
"OrderDate":"1996-07-19T00:00:00.000Z",
"ShippedDate":"1996-07-29T00:00:00.000Z",
"Freight":55.09,
"ShipName":"Ottilies Käseladen",
"ShipAddress":"Mehrheimerstr. 369",
"ShipCity":"Köln",
"ShipRegion":null,
"ShipCountry":"Germany",
"Verified": true
},
{
"OrderID":10261,
"CustomerID":"QUEDE",
"OrderDate":"1996-07-19T00:00:00.000Z",
"ShippedDate":"1996-07-30T00:00:00.000Z",
"Freight":3.05,
"ShipName":"Que Delícia",
"ShipAddress":"Rua da Panificadora, 12",
"ShipCity":"Rio de Janeiro",
"ShipRegion":"RJ",
"ShipCountry":"Brazil"
},
{
"OrderID":10262,
"CustomerID":"RATTC",
"OrderDate":"1996-07-22T00:00:00.000Z",
"ShippedDate":"1996-07-25T00:00:00.000Z",
"Freight":48.29,
"ShipName":"Rattlesnake Canyon Grocery",
"ShipAddress":"2817 Milton Dr.",
"ShipCity":"Albuquerque",
"ShipRegion":"NM",
"ShipCountry":"USA",
"Verified": true
},
{
"OrderID":10263,
"CustomerID":"ERNSH",
"OrderDate":"1996-07-23T00:00:00.000Z",
"ShippedDate":"1996-07-31T00:00:00.000Z",
"Freight":146.06,
"ShipName":"Ernst Handel",
"ShipAddress":"Kirchgasse 6",
"ShipCity":"Graz",
"ShipRegion":null,
"Verified": true,
"ShipCountry":"Austria"
},
{
"OrderID":10264,
"CustomerID":"FOLKO",
"OrderDate":"1996-07-24T00:00:00.000Z",
"ShippedDate":"1996-08-23T00:00:00.000Z",
"Freight":3.67,
"ShipName":"Folk och fä HB",
"ShipAddress":"Åkergatan 24",
"ShipCity":"Bräcke",
"ShipRegion":null,
"ShipCountry":"Sweden"
},
{
"OrderID":10265,
"CustomerID":"BLONP",
"OrderDate":"1996-07-25T00:00:00.000Z",
"ShippedDate":"1996-08-12T00:00:00.000Z",
"Freight":55.28,
"ShipName":"Blondel père et fils",
"ShipAddress":"24, place Kléber",
"ShipCity":"Strasbourg",
"ShipRegion":null,
"ShipCountry":"France"
},
{
"OrderID":10266,
"CustomerID":"WARTH",
"OrderDate":"1996-07-26T00:00:00.000Z",
"ShippedDate":"1996-07-31T00:00:00.000Z",
"Freight":25.73,
"ShipName":"Wartian Herkku",
"ShipAddress":"Torikatu 38",
"ShipCity":"Oulu",
"ShipRegion":null,
"ShipCountry":"Finland"
},
{
"OrderID":10267,
"CustomerID":"FRANK",
"OrderDate":"1996-07-29T00:00:00.000Z",
"ShippedDate":"1996-08-06T00:00:00.000Z",
"Freight":208.58,
"ShipName":"Frankenversand",
"ShipAddress":"Berliner Platz 43",
"ShipCity":"München",
"ShipRegion":null,
"ShipCountry":"Germany",
"Verified": true
},
{
"OrderID":10268,
"CustomerID":"GROSR",
"OrderDate":"1996-07-30T00:00:00.000Z",
"ShippedDate":"1996-08-02T00:00:00.000Z",
"Freight":66.29,
"ShipName":"GROSELLA-Restaurante",
"ShipAddress":"5ª Ave. Los Palos Grandes",
"ShipCity":"Caracas",
"ShipRegion":"DF",
"ShipCountry":"Venezuela"
},
{
"OrderID":10269,
"CustomerID":"WHITC",
"OrderDate":"1996-07-31T00:00:00.000Z",
"ShippedDate":"1996-08-09T00:00:00.000Z",
"Freight":4.56,
"ShipName":"White Clover Markets",
"ShipAddress":"1029 - 12th Ave. S.",
"ShipCity":"Seattle",
"ShipRegion":"WA",
"ShipCountry":"USA"
},
{
"OrderID":10270,
"CustomerID":"WARTH",
"OrderDate":"1996-08-01T00:00:00.000Z",
"ShippedDate":"1996-08-02T00:00:00.000Z",
"Freight":136.54,
"ShipName":"Wartian Herkku",
"ShipAddress":"Torikatu 38",
"ShipCity":"Oulu",
"ShipRegion":null,
"ShipCountry":"Finland"
},
{
"OrderID":10271,
"CustomerID":"SPLIR",
"OrderDate":"1996-08-01T00:00:00.000Z",
"ShippedDate":"1996-08-30T00:00:00.000Z",
"Freight":4.54,
"ShipName":"Split Rail Beer & Ale",
"ShipAddress":"P.O. Box 555",
"ShipCity":"Lander",
"ShipRegion":"WY",
"ShipCountry":"USA"
},
{
"OrderID":10272,
"CustomerID":"RATTC",
"OrderDate":"1996-08-02T00:00:00.000Z",
"ShippedDate":"1996-08-06T00:00:00.000Z",
"Freight":98.03,
"ShipName":"Rattlesnake Canyon Grocery",
"ShipAddress":"2817 Milton Dr.",
"ShipCity":"Albuquerque",
"ShipRegion":"NM",
"ShipCountry":"USA"
},
{
"OrderID":10273,
"CustomerID":"QUICK",
"OrderDate":"1996-08-05T00:00:00.000Z",
"ShippedDate":"1996-08-12T00:00:00.000Z",
"Freight":76.07,
"ShipName":"QUICK-Stop",
"ShipAddress":"Taucherstraße 10",
"ShipCity":"Cunewalde",
"ShipRegion":null,
"ShipCountry":"Germany"
},
{
"OrderID":10274,
"CustomerID":"VINET",
"OrderDate":"1996-08-06T00:00:00.000Z",
"ShippedDate":"1996-08-16T00:00:00.000Z",
"Freight":6.01,
"ShipName":"Vins et alcools Chevalier",
"ShipAddress":"59 rue de l'Abbaye",
"ShipCity":"Reims",
"ShipRegion":null,
"ShipCountry":"France"
},
{
"OrderID":10275,
"CustomerID":"MAGAA",
"OrderDate":"1996-08-07T00:00:00.000Z",
"ShippedDate":"1996-08-09T00:00:00.000Z",
"Freight":26.93,
"ShipName":"Magazzini Alimentari Riuniti",
"ShipAddress":"Via Ludovico il Moro 22",
"ShipCity":"Bergamo",
"ShipRegion":null,
"ShipCountry":"Italy"
},
{
"OrderID":10276,
"CustomerID":"TORTU",
"OrderDate":"1996-08-08T00:00:00.000Z",
"ShippedDate":"1996-08-14T00:00:00.000Z",
"Freight":13.84,
"ShipName":"Tortuga Restaurante",
"ShipAddress":"Avda. Azteca 123",
"ShipCity":"México D.F.",
"ShipRegion":null,
"ShipCountry":"Mexico"
},
{
"OrderID":10277,
"CustomerID":"MORGK",
"OrderDate":"1996-08-09T00:00:00.000Z",
"ShippedDate":"1996-08-13T00:00:00.000Z",
"Freight":125.77,
"ShipName":"Morgenstern Gesundkost",
"ShipAddress":"Heerstr. 22",
"ShipCity":"Leipzig",
"ShipRegion":null,
"ShipCountry":"Germany",
"Verified": true
},
{
"OrderID":10278,
"CustomerID":"BERGS",
"OrderDate":"1996-08-12T00:00:00.000Z",
"ShippedDate":"1996-08-16T00:00:00.000Z",
"Freight":92.69,
"ShipName":"Berglunds snabbköp",
"ShipAddress":"Berguvsvägen 8",
"ShipCity":"Luleå",
"ShipRegion":null,
"ShipCountry":"Sweden"
},
{
"OrderID":10279,
"CustomerID":"LEHMS",
"OrderDate":"1996-08-13T00:00:00.000Z",
"ShippedDate":"1996-08-16T00:00:00.000Z",
"Freight":25.83,
"ShipName":"Lehmanns Marktstand",
"ShipAddress":"Magazinweg 7",
"ShipCity":"Frankfurt a.M.",
"ShipRegion":null,
"ShipCountry":"Germany"
},
{
"OrderID":10280,
"CustomerID":"BERGS",
"OrderDate":"1996-08-14T00:00:00.000Z",
"ShippedDate":"1996-09-12T00:00:00.000Z",
"Freight":8.98,
"ShipName":"Berglunds snabbköp",
"ShipAddress":"Berguvsvägen 8",
"ShipCity":"Luleå",
"ShipRegion":null,
"ShipCountry":"Sweden",
"Verified": true
},
{
"OrderID":10281,
"CustomerID":"ROMEY",
"OrderDate":"1996-08-14T00:00:00.000Z",
"ShippedDate":"1996-08-21T00:00:00.000Z",
"Freight":2.94,
"ShipName":"Romero y tomillo",
"ShipAddress":"Gran Vía, 1",
"ShipCity":"Madrid",
"ShipRegion":null,
"ShipCountry":"Spain"
},
{
"OrderID":10282,
"CustomerID":"ROMEY",
"OrderDate":"1996-08-15T00:00:00.000Z",
"ShippedDate":"1996-08-21T00:00:00.000Z",
"Freight":12.69,
"ShipName":"Romero y tomillo",
"ShipAddress":"Gran Vía, 1",
"ShipCity":"Madrid",
"ShipRegion":null,
"ShipCountry":"Spain"
},
{
"OrderID":10283,
"CustomerID":"LILAS",
"OrderDate":"1996-08-16T00:00:00.000Z",
"ShippedDate":"1996-08-23T00:00:00.000Z",
"Freight":84.81,
"ShipName":"LILA-Supermercado",
"ShipAddress":"Carrera 52 con Ave. Bolívar #65-98 Llano Largo",
"ShipCity":"Barquisimeto",
"ShipRegion":"Lara",
"ShipCountry":"Venezuela"
},
{
"OrderID":10284,
"CustomerID":"LEHMS",
"OrderDate":"1996-08-19T00:00:00.000Z",
"ShippedDate":"1996-08-27T00:00:00.000Z",
"Freight":76.56,
"ShipName":"Lehmanns Marktstand",
"ShipAddress":"Magazinweg 7",
"ShipCity":"Frankfurt a.M.",
"ShipRegion":null,
"ShipCountry":"Germany",
"Verified": true
},
{
"OrderID":10285,
"CustomerID":"QUICK",
"OrderDate":"1996-08-20T00:00:00.000Z",
"ShippedDate":"1996-08-26T00:00:00.000Z",
"Freight":76.83,
"ShipName":"QUICK-Stop",
"ShipAddress":"Taucherstraße 10",
"ShipCity":"Cunewalde",
"ShipRegion":null,
"ShipCountry":"Germany"
},
{
"OrderID":10286,
"CustomerID":"QUICK",
"OrderDate":"1996-08-21T00:00:00.000Z",
"ShippedDate":"1996-08-30T00:00:00.000Z",
"Freight":229.24,
"ShipName":"QUICK-Stop",
"ShipAddress":"Taucherstraße 10",
"ShipCity":"Cunewalde",
"ShipRegion":null,
"ShipCountry":"Germany"
},
{
"OrderID":10287,
"CustomerID":"RICAR",
"OrderDate":"1996-08-22T00:00:00.000Z",
"ShippedDate":"1996-08-28T00:00:00.000Z",
"Freight":12.76,
"ShipName":"Ricardo Adocicados",
"ShipAddress":"Av. Copacabana, 267",
"ShipCity":"Rio de Janeiro",
"ShipRegion":"RJ",
"ShipCountry":"Brazil"
},
{
"OrderID":10288,
"CustomerID":"REGGC",
"OrderDate":"1996-08-23T00:00:00.000Z",
"ShippedDate":"1996-09-03T00:00:00.000Z",
"Freight":7.45,
"ShipName":"Reggiani Caseifici",
"ShipAddress":"Strada Provinciale 124",
"ShipCity":"Reggio Emilia",
"ShipRegion":null,
"ShipCountry":"Italy"
},
{
"OrderID":10289,
"CustomerID":"BSBEV",
"OrderDate":"1996-08-26T00:00:00.000Z",
"ShippedDate":"1996-08-28T00:00:00.000Z",
"Freight":22.77,
"ShipName":"B's Beverages",
"ShipAddress":"Fauntleroy Circus",
"ShipCity":"London",
"ShipRegion":null,
"ShipCountry":"UK"
},
{
"OrderID":10290,
"CustomerID":"COMMI",
"OrderDate":"1996-08-27T00:00:00.000Z",
"ShippedDate":"1996-09-03T00:00:00.000Z",
"Freight":79.7,
"ShipName":"Comércio Mineiro",
"ShipAddress":"Av. dos Lusíadas, 23",
"ShipCity":"Sao Paulo",
"ShipRegion":"SP",
"ShipCountry":"Brazil"
},
{
"OrderID":10291,
"CustomerID":"QUEDE",
"OrderDate":"1996-08-27T00:00:00.000Z",
"ShippedDate":"1996-09-04T00:00:00.000Z",
"Freight":6.4,
"ShipName":"Que Delícia",
"ShipAddress":"Rua da Panificadora, 12",
"ShipCity":"Rio de Janeiro",
"ShipRegion":"RJ",
"ShipCountry":"Brazil"
},
{
"OrderID":10292,
"CustomerID":"TRADH",
"OrderDate":"1996-08-28T00:00:00.000Z",
"ShippedDate":"1996-09-02T00:00:00.000Z",
"Freight":1.35,
"ShipName":"Tradiçao Hipermercados",
"ShipAddress":"Av. Inês de Castro, 414",
"ShipCity":"Sao Paulo",
"ShipRegion":"SP",
"ShipCountry":"Brazil"
},
{
"OrderID":10293,
"CustomerID":"TORTU",
"OrderDate":"1996-08-29T00:00:00.000Z",
"ShippedDate":"1996-09-11T00:00:00.000Z",
"Freight":21.18,
"ShipName":"Tortuga Restaurante",
"ShipAddress":"Avda. Azteca 123",
"ShipCity":"México D.F.",
"ShipRegion":null,
"ShipCountry":"Mexico"
},
{
"OrderID":10294,
"CustomerID":"RATTC",
"OrderDate":"1996-08-30T00:00:00.000Z",
"ShippedDate":"1996-09-05T00:00:00.000Z",
"Freight":147.26,
"ShipName":"Rattlesnake Canyon Grocery",
"ShipAddress":"2817 Milton Dr.",
"ShipCity":"Albuquerque",
"ShipRegion":"NM",
"ShipCountry":"USA"
}];
});
AutoFill Feature allows you to copy the data of selected cells and paste it to another cells by just dragging the autofill icon of the selected cells up to required cells. This feature is enabled by defining enableAutoFill
property as true.
<template>
<div id="app">
<ejs-grid :dataSource='data' :enableAutoFill= "true" :selectionSettings='selectionOptions' :editSettings='editSettings' :toolbar='toolbar' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' :visible='false' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipCountry' headerText='ShipCountry' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
toolbar: ['Add', 'Update', 'Cancel'],
selectionOptions: { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' }
};
},
provide: {
grid: [Edit, Toolbar]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
});
- If
enableAutoFill
is set to true, then the autofill icon will be displayed on cell selection to copy cells.- It requires the selection
mode
to be Cell,cellSelectionMode
to be Box and also Batch Editing should be enabled.
You can able to copy the content of a cell or a group of cells by selecting the cells and pressing Ctrl + C shortcut key and paste it to another set of cells by selecting the cells and pressing Ctrl + V shortcut key.
<template>
<div id="app">
<ejs-grid :dataSource='data' :selectionSettings='selectionOptions' :editSettings='editSettings' :toolbar='toolbar' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' :visible='false' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipCountry' headerText='ShipCountry' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' },
toolbar: ['Add', 'Update', 'Cancel'],
selectionOptions: { type: 'Multiple', mode: 'Cell', cellSelectionMode: 'Box' }
};
},
provide: {
grid: [Edit, Toolbar]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
});
To perform paste functionality, it requires the selection
mode
to be Cell,cellSelectionMode
to be Box and also Batch Editing should be enabled.