In Normal edit mode, when you start editing the currently selected record is changed to edit state.
You can change the cell values and save edited data to the data source.
To enable Normal edit, set the editSettings.mode as Normal.
<template>
<div id="app">
<ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, 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: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
};
},
provide: {
grid: [Page, 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.employeeData = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 1, 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Manager', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', EmployeeID: 5, 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', Role: 'Admin', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Employee', 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
}];
exports.employeeDetails = [
{
EmployeeID: 1, Role: 'TeamLead', Salary: 15000, Address: 'Chennai'
},
{
EmployeeID: 2, Role: 'Manager', Salary: 20000, Address: 'Bangalore'
},
{
EmployeeID: 3, Role: 'Engineer', Salary: 10000, Address: 'Cochin'
},
{
EmployeeID: 4, Role: 'Sales', Salary: 20000, Address: 'Trivandrum'
},
{
EmployeeID: 5, Role: 'Support', Salary: 10000, Address: 'Delhi'
}
];
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"
}];
exports.productData = [
{
ProductID: 1,
ProductName: 'Chai',
UnitPrice: 18.0,
UnitsInStock: 39,
TotalCost: 702
},
{
ProductID: 2,
ProductName: 'Chang',
UnitPrice: 19.0,
UnitsInStock: 17,
TotalCost: 323
},
{
ProductID: 3,
ProductName: 'Aniseed Syrup',
UnitPrice: 10.0,
UnitsInStock: 13,
TotalCost: 130
},
{
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
UnitPrice: 22.0,
UnitsInStock: 53,
TotalCost: 1166
},
{
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
UnitPrice: 21.35,
UnitsInStock: 0,
TotalCost: 0
}
];
});Normal edit mode is default mode of editing.
You can update the column value based on another column edited value by using the Cell Edit Template feature.
In the below demo, we have update the TotalCost column value based on the UnitPrice and UnitInStock column value while editing.
<template>
<div id="app">
<ejs-grid id="grid" :dataSource="data" :editSettings="editSettings" :toolbar="toolbar" height="273px">
<e-columns>
<e-column field="ProductID" headerText="Product ID" textAlign="Right" :isPrimaryKey="true" width="100"></e-column>
<e-column field="ProductName" headerText="Product Name" width="120"></e-column>
<e-column field="UnitPrice" headerText="Unit Price" editType="numericedit" :edit="priceParams"
width="150" format="C2" textAlign="Right" ></e-column>
<e-column field="UnitsInStock" headerText="Units In Stock" editType="numericedit"
:edit="stockParams" width="150" textAlign="Right"></e-column>
<e-column field="TotalCost" headerText="Total Cost" width="150" :allowEditing="false" format="C2" textAlign="Right" ></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { NumericTextBox } from "@syncfusion/ej2-inputs";
import { productData } from "./datasource.js";
let priceElem, stockElem, priceObj, stockObj;
Vue.use(GridPlugin);
export default {
data: () => {
return {
data: productData,
toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"],
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
},
priceParams: {
create: () => {
priceElem = document.createElement("input");
return priceElem;
},
read: () => {
return priceObj.value;
},
destroy: () => {
priceObj.destroy();
},
write: (args) => {
priceObj = new NumericTextBox({
value: args.rowData[args.column.field],
change: function (args) {
let formEle = document
.getElementById("grid")
.querySelector("form").ej2_instances[0];
var totalCostFieldEle = formEle.getInputElement("TotalCost");
totalCostFieldEle.value = priceObj.value * stockObj.value;
},
});
priceObj.appendTo(priceElem);
},
},
stockParams: {
create: () => {
stockElem = document.createElement("input");
return stockElem;
},
read: () => {
return stockObj.value;
},
destroy: () => {
stockObj.destroy();
},
write: (args) => {
stockObj = new NumericTextBox({
value: args.rowData[args.column.field],
change: function (args) {
let formEle = document
.getElementById("grid")
.querySelector("form").ej2_instances[0];
var totalCostFieldEle = formEle.getInputElement("TotalCost");
totalCostFieldEle.value = priceObj.value * stockObj.value;
},
});
stockObj.appendTo(stockElem);
},
},
};
},
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.employeeData = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 1, 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Manager', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', EmployeeID: 5, 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', Role: 'Admin', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Employee', 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
}];
exports.employeeDetails = [
{
EmployeeID: 1, Role: 'TeamLead', Salary: 15000, Address: 'Chennai'
},
{
EmployeeID: 2, Role: 'Manager', Salary: 20000, Address: 'Bangalore'
},
{
EmployeeID: 3, Role: 'Engineer', Salary: 10000, Address: 'Cochin'
},
{
EmployeeID: 4, Role: 'Sales', Salary: 20000, Address: 'Trivandrum'
},
{
EmployeeID: 5, Role: 'Support', Salary: 10000, Address: 'Delhi'
}
];
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"
}];
exports.productData = [
{
ProductID: 1,
ProductName: 'Chai',
UnitPrice: 18.0,
UnitsInStock: 39,
TotalCost: 702
},
{
ProductID: 2,
ProductName: 'Chang',
UnitPrice: 19.0,
UnitsInStock: 17,
TotalCost: 323
},
{
ProductID: 3,
ProductName: 'Aniseed Syrup',
UnitPrice: 10.0,
UnitsInStock: 13,
TotalCost: 130
},
{
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
UnitPrice: 22.0,
UnitsInStock: 53,
TotalCost: 1166
},
{
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
UnitPrice: 21.35,
UnitsInStock: 0,
TotalCost: 0
}
];
});You can prevent the CRUD operations of the Grid by using condition in the actionBegin event with requestType as beginEdit for editing, add for adding and delete for deleting actions.
In the below demo, we prevent the CRUD operation based on the Role column value. If the Role Column is Employee, we are unable to edit/delete that row.
<template>
<div id="app">
<button v-on:click="btnClick">Grid is Addable</button>
<ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' :actionBegin="actionBegin" height='240px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
<e-column field='Role' headerText='Role' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { employeeData } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: employeeData,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
isAddable: true
};
},
methods: {
actionBegin: function (args) {
if (args.requestType === "beginEdit") {
if (args.rowData["Role"].toLowerCase() == "employee") {
args.cancel = true;
}
}
if (args.requestType === "delete") {
if (args.data[0]["Role"].toLowerCase() === "employee") {
args.cancel = true;
}
}
if (args.requestType === "add") {
if (!this.isAddable) {
args.cancel = true;
}
}
},
btnClick: function (args) {
args.target.innerText === "Grid is Addable" ? (args.target.innerText = "Grid is Not Addable") : (args.target.innerText = "Grid is Addable");
this.isAddable = !this.isAddable;
},
},
provide: {
grid: [Page, 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.employeeData = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 1, 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Manager', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', EmployeeID: 5, 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', Role: 'Admin', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Employee', 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
}];
exports.employeeDetails = [
{
EmployeeID: 1, Role: 'TeamLead', Salary: 15000, Address: 'Chennai'
},
{
EmployeeID: 2, Role: 'Manager', Salary: 20000, Address: 'Bangalore'
},
{
EmployeeID: 3, Role: 'Engineer', Salary: 10000, Address: 'Cochin'
},
{
EmployeeID: 4, Role: 'Sales', Salary: 20000, Address: 'Trivandrum'
},
{
EmployeeID: 5, Role: 'Support', Salary: 10000, Address: 'Delhi'
}
];
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"
}];
exports.productData = [
{
ProductID: 1,
ProductName: 'Chai',
UnitPrice: 18.0,
UnitsInStock: 39,
TotalCost: 702
},
{
ProductID: 2,
ProductName: 'Chang',
UnitPrice: 19.0,
UnitsInStock: 17,
TotalCost: 323
},
{
ProductID: 3,
ProductName: 'Aniseed Syrup',
UnitPrice: 10.0,
UnitsInStock: 13,
TotalCost: 130
},
{
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
UnitPrice: 22.0,
UnitsInStock: 53,
TotalCost: 1166
},
{
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
UnitPrice: 21.35,
UnitsInStock: 0,
TotalCost: 0
}
];
});Grid methods can be used to perform CRUD operations programmatically. The addRecord, deleteRecord, and startEdit methods are used to perform CRUD operations in the following demo.
Note: In both normal and dialog editing modes, these methods can be used.
<template>
<div id="app">
<button id="edit" @click="clickEdit">Edit</button>
<button id="add" @click="clickAdd">Add</button>
<button id="delete" @click="clickDelete">Delete</button>
<button id="updaterow" @click="clickUpdateRow">Update Row</button>
<button id="updatecell" @click="clickUpdateCell">Update Cell</button>
<br /><br />
<ejs-grid ref="grid" :dataSource='data' :editSettings='editSettings' height='230px' id="Grid">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120 :isPrimaryKey='true'></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, 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 },
};
},
methods: {
clickAdd: function () {
this.$refs.grid.ej2Instances.addRecord({ "OrderID": "10248", "CustomerID": "RTER", "ShipCity": "America", "ShipName": "Hanari" });
},
clickEdit: function () {
this.$refs.grid.ej2Instances.startEdit();
},
clickDelete: function () {
this.$refs.grid.ej2Instances.deleteRecord();
},
clickUpdateRow: function () {
this.$refs.grid.ej2Instances.updateRow(0, { OrderID: 10248, CustomerID: 'RTER', ShipCity: 'America', ShipName: 'Hanari' });
},
clickUpdateCell: function () {
this.$refs.grid.ej2Instances.setCellValue((this.$refs.grid.ej2Instances.currentViewData[0] as any).OrderID,'CustomerID','Value Changed');
}
},
provide: {
grid: [Edit]
}
}
</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.employeeData = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 1, 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Manager', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', EmployeeID: 5, 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', Role: 'Admin', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Employee', 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
}];
exports.employeeDetails = [
{
EmployeeID: 1, Role: 'TeamLead', Salary: 15000, Address: 'Chennai'
},
{
EmployeeID: 2, Role: 'Manager', Salary: 20000, Address: 'Bangalore'
},
{
EmployeeID: 3, Role: 'Engineer', Salary: 10000, Address: 'Cochin'
},
{
EmployeeID: 4, Role: 'Sales', Salary: 20000, Address: 'Trivandrum'
},
{
EmployeeID: 5, Role: 'Support', Salary: 10000, Address: 'Delhi'
}
];
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"
}];
exports.productData = [
{
ProductID: 1,
ProductName: 'Chai',
UnitPrice: 18.0,
UnitsInStock: 39,
TotalCost: 702
},
{
ProductID: 2,
ProductName: 'Chang',
UnitPrice: 19.0,
UnitsInStock: 17,
TotalCost: 323
},
{
ProductID: 3,
ProductName: 'Aniseed Syrup',
UnitPrice: 10.0,
UnitsInStock: 13,
TotalCost: 130
},
{
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
UnitPrice: 22.0,
UnitsInStock: 53,
TotalCost: 1166
},
{
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
UnitPrice: 21.35,
UnitsInStock: 0,
TotalCost: 0
}
];
});The delete confirm dialog can be shown when deleting a record by defining the
showDeleteConfirmDialog as true
<template>
<div id="app">
<ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273px'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign= 'Right' editType= 'numericedit' width=120 format= 'C2'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
editSettings: { showDeleteConfirmDialog: true, allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
};
},
provide: {
grid: [Page, 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.employeeData = [
{
OrderID: 10248, CustomerID: 'VINET', Role: 'Admin', EmployeeID: 1, 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Manager', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Employee', 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', Role: 'Admin', 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', Role: 'Manager', EmployeeID: 5, 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', Role: 'Admin', 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', Role: 'Admin', 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', Role: 'Manager', 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', Role: 'Employee', 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
}];
exports.employeeDetails = [
{
EmployeeID: 1, Role: 'TeamLead', Salary: 15000, Address: 'Chennai'
},
{
EmployeeID: 2, Role: 'Manager', Salary: 20000, Address: 'Bangalore'
},
{
EmployeeID: 3, Role: 'Engineer', Salary: 10000, Address: 'Cochin'
},
{
EmployeeID: 4, Role: 'Sales', Salary: 20000, Address: 'Trivandrum'
},
{
EmployeeID: 5, Role: 'Support', Salary: 10000, Address: 'Delhi'
}
];
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":