The columns.editType is used to define the editor component for any particular column.
You can set the columns.editType based on data type of the column.
NumericTextBox component for integers, double, and decimal data types.TextBox component for string data type.DropDownList component to show all unique values related to that field.Checkbox component for boolean type.DatePicker component for date type.Also, you can customize model of the columns.editType component through the columns.edit.params.
The following table describes cell edit type component and their corresponding edit params of the column.
| Component | Example |
|---|---|
NumericTextBox |
params: { decimals: 2, value: 5 } |
TextBox |
- |
DropDownList |
params: { value: ‘Germany’ } |
DatePicker |
params: { value: new Date()} |
Checkbox |
params: { checked: 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' :edit='numericParams' width=120 format= 'C2'></e-column>
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' :edit='ddParams' width=150></e-column>
<e-column field='ShippedDate' headerText='Shipped Date' editType= 'datepickeredit' :edit='dpParams' width=150></e-column>
<e-column field='Verified' headerText='Verified' editType= 'booleanedit' :edit='boolParams' 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 },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
numericParams: { params: { decimals: 2, value: 5 } },
ddParams: { params: { value: 'Germany' } },
dpParams: { params: {value: new Date() } },
boolParams: { params: {checked: true } }
};
},
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
}
];
});If edit type is not defined in the column, then it will be considered as the stringedit type (Textbox component).
By default, the number of decimal places will be restricted to two in the NumericTextBox while editing the numeric column. We can restrict to type the decimal points in a NumericTextBox by using the validateDecimalOnType and decimals properties of NumericTextBox.
In the below demo, while editing the row we have restricted to type the decimal point value in the NumericTextBox of Freight column.
<template>
<div id="app">
<ejs-grid :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='265px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Center' editType='numericedit' :edit='numericParams' width=80></e-column>
<e-column field='ShipCity' headerText='Ship City' editType='dropdownedit' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin,Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
data: () => {
return {
data: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
numericParams: { params: {
validateDecimalOnType: true,
decimals: 0,
format: "N" }
},
};
},
provide: {
grid: [Edit, Toolbar]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.data = [
{
"OrderID":10248,
"CustomerID":"VINET",
"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.cascadeData = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'Australia', ShipState: 'Queensland', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Australia', ShipState: 'Tasmania', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'United States', ShipState: 'New York', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'Australia', ShipState: 'Queensland', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 2, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'United States', ShipState: 'New York', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 7, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'United States', ShipState: 'New York', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'United States', ShipState: 'Virginia', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Australia', ShipState: 'Tasmania', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'United States', ShipState: 'Virginia', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'United States', ShipState: 'Virginia', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'United States', ShipState: 'Washington', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'United States', ShipState: 'Washington', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Australia', ShipState: 'Victoria', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'United States', ShipState: 'Washington', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'Australia', ShipState: 'Victoria', Freight: 48.29, Verified: !0
}];
});You can provide data source to the DropDownList by using the columns.edit.params property.
While setting new data source using edit params, you must specify a new query property too for the DropDownList as follows,
countryParams: {
params: {
allowFiltering: true,
dataSource: country,
fields: {text:"countryName",value:"countryName"},
query: new Query(),
actionComplete: () => false
}
};You can also enable filtering for the DropDownList by passing the allowFiltering as true to the edit params.
In the below demo, DropDownList is rendered with custom Datasource for the ShipCountry column and enabled filtering to search DropDownList items.
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='data' :editSettings='editSettings' :toolbar='toolbar' height='273px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' :isPrimaryKey='true' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='ShipCountry' headerText='ShipCountry' editType='dropdownedit' :edit='countryParams' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { createElement } from '@syncfusion/ej2-base';
import { GridPlugin,Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import { Query } from '@syncfusion/ej2-data';
import { cascadeData } from './datasource.js';
let country= [
{ countryName: 'United States', countryId: '1' },
{ countryName: 'Australia', countryId: '2' },
{ countryName: 'India', countryId: '3' }
];
Vue.use(GridPlugin);
export default {
data: () => {
return {
data: cascadeData,
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
countryParams: {
params: {
allowFiltering: true,
dataSource: country,
fields: {text:"countryName",value:"countryName"},
query: new Query(),
actionComplete: () => false
}
}
};
},
provide: {
grid: [Edit, Toolbar]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.data = [
{
"OrderID":10248,
"CustomerID":"VINET",
"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.cascadeData = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'Australia', ShipState: 'Queensland', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Australia', ShipState: 'Tasmania', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'United States', ShipState: 'New York', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'Australia', ShipState: 'Queensland', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 2, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'United States', ShipState: 'New York', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 7, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'United States', ShipState: 'New York', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'United States', ShipState: 'Virginia', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Australia', ShipState: 'Tasmania', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'United States', ShipState: 'Virginia', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'United States', ShipState: 'Virginia', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'United States', ShipState: 'Washington', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'United States', ShipState: 'Washington', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Australia', ShipState: 'Victoria', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'United States', ShipState: 'Washington', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'Australia', ShipState: 'Victoria', Freight: 48.29, Verified: !0
}];
});The cell edit template is used to add a custom component for a particular column by invoking the following functions:
<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='OrderDate' headerText='Order Date' type= 'date' format= 'yMd' :edit='dpParams' 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 { DatePicker } from '@syncfusion/ej2-calendars';
import { data } from './datasource.js';
Vue.use(GridPlugin);
let elem;
let datePickerObj;
export default {
data() {
return {
data: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
dpParams: {
create: function() {
elem = document.createElement('input');
return elem;
},
read: () => {
return datePickerObj.value;
},
destroy: () => {
datePickerObj.destroy();
},
write: (args) => {
datePickerObj = new DatePicker({
value: new Date(args.rowData[args.column.field]),
floatLabelType: 'Never'
});
datePickerObj.appendTo(elem);
}
}
};
},
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
}
];
});The cell editor for a particular column can be specified using a Vue Component. The column.editTemplate property used to define the corresponding column editor.
<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='OrderDate' headerText='Order Date' type='date' format= 'yMd' width=150 :editTemplate='editTemplate'></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';
import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";
Vue.use(GridPlugin);
Vue.use(DatePickerPlugin);
export default {
data() {
return {
data: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
};
},
methods: {
editTemplate: function() {
return {template: Vue.component('datePicker', {
template: `<ejs-datepicker id="OrderDate" placeholder="Order Date" v-model="data.OrderDate" floatLabelType='Never'></ejs-datepicker>`,
data() {
return {data:{}}
}
})}
}
},
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"