How can I help you?
Foreign key column in React Grid component
17 Feb 202624 minutes to read
The foreign key column in the Syncfusion® React Grid component displays related data from a foreign key data source. This feature enables representation of foreign key relationships between data sources, displaying meaningful values instead of raw key identifiers.
Example:
- Main Grid Data: Contains the foreign key ID (e.g., “EmployeeID: 3”)
- Foreign Data Source: Contains the full details (e.g., Employee with ID “3” is “Maria Gonzalez”)
- Grid Display: Shows the meaningful value (“Maria Gonzalez”) instead of the ID (“3”)
To enable the foreign key column in the Grid:
Step 1: Inject the ForeignKey module
Import and inject the ForeignKey module into the Grid component:
import { ForeignKey } from '@syncfusion/ej2-react-grids';
function App() {
return <GridComponent>
<Inject services={[ForeignKey]} />
</GridComponent>
};Step 2: Define the foreign key column
Configure the foreign key column using three essential properties:
-
dataSource: The external data source containing the related information (e.g., employee details).
-
foreignKeyField: The field in the foreign data source that matches the ID in the main Grid (e.g., “EmployeeID” in both sources).
-
foreignKeyValue: The field from the foreign data source to display in the Grid (e.g., “FirstName” to show employee names).
<ColumnDirective
field='EmployeeID' // Field in main data containing the ID
foreignKeyField='EmployeeID' // Matching field in foreign data source
foreignKeyValue='FirstName' // Field to display from foreign data source
dataSource={employeeData} // Foreign data source
headerText='Employee Name'
width='150'>
</ColumnDirective>Binding local data
The Grid supports binding local data to a foreign key column, enabling display of related data from a local data source.
In the following example:
- Main Data (orders): Contains order records with “EmployeeID” values (1, 2, 3, etc.).
- Foreign Data (employees): Contains employee records with “EmployeeID” and “FirstName” fields.
- Result: The Grid displays employee first names instead of numeric IDs.
For instance, if an order has “EmployeeID: 1”, the Grid looks up the employee with “EmployeeID: 1” in the “employeeData” and displays their “FirstName” (e.g., “Nancy”).
import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' dataSource={employeeData} headerText='Employee Name' width='150'/>
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<Inject services={[ForeignKey]}/>
</GridComponent>;
}
;
export default App;import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' dataSource={employeeData} headerText='Employee Name' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[ForeignKey]} />
</GridComponent>
};
export default App;export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];If
foreignKeyFieldis not defined, the column uses field.
Binding remote data
Foreign key column supports binding remote data, enabling it to fetch related data from web services or APIs instead of local arrays. To achieve this, assign the service data as an instance of DataManager to the dataSource property, and provide the endpoint URL as the data source URL.
The following example demonstrates foreign key column implementation with remote data binding using the ODataV4Adaptor:
import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import * as React from 'react';
function App() {
const data = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
adaptor: new ODataV4Adaptor(),
crossDomain: true
});
const employeeData = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees/',
adaptor: new ODataV4Adaptor(),
crossDomain: true
});
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' dataSource={employeeData} headerText='Employee Name' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[ForeignKey]} />
</GridComponent>;
};
export default App;import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
import * as React from 'react';
function App() {
const data: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
adaptor: new ODataV4Adaptor(),
crossDomain: true
});
const employeeData: DataManager = new DataManager({
url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees/',
adaptor: new ODataV4Adaptor(),
crossDomain: true
});
return <GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' dataSource={employeeData} headerText='Employee Name' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[ForeignKey]} />
</GridComponent>;
};
export default App;export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];For remote data, sorting and grouping operations are performed based on
foreignKeyField(the ID field) instead offoreignKeyValue(the display field) for better performance.
Use edit template in foreign key column
The Grid supports custom edit templates for foreign key columns. By default, a DropDownList component renders for editing. Alternative components can be rendered using the edit property. The edit property accepts an object with four callback functions:
-
create: Creates the input element when editing begins. -
write: Initializes the component with the current value. -
read: Retrieves the selected value from the component when editing ends. -
destroy: Cleans up the component when editing ends.
In the following example, an AutoComplete component is rendered as the edit template for the “EmployeeID” foreign key column. The dataSource property of the AutoComplete component is set to the employees data, and the fields property is configured to display the “FirstName” field as the value.
import { createElement, getValue } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Edit, ForeignKey, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let autoComplete;
const editOption = { allowEditing: true };
const toolbar = ['Edit', 'Update', 'Cancel'];
const edit = {
create: () => { // to create input element
return createElement('input');
},
destroy: () => { // to destroy the custom component.
autoComplete.destroy();
},
read: () => { // return edited value to update data source
const value = new DataManager(employeeData).executeLocal(new Query().where('FirstName', 'equal', autoComplete.value));
return value.length && getValue('EmployeeID', value[0]); // to convert foreign key value to local value.
},
write: (args) => { // to show the value for date picker
autoComplete = new AutoComplete({
dataSource: new DataManager(employeeData),
fields: { value: args.column.foreignKeyValue },
value: args.foreignKeyData[0][args.column.foreignKeyValue]
});
autoComplete.appendTo(args.element);
}
};
return <GridComponent dataSource={data} height={280} editSettings={editOption} toolbar={toolbar}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true}/>
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Employee Name' width='150' edit={edit}/>
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' editType='numericedit'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<Inject services={[ForeignKey, Edit, Toolbar]}/>
</GridComponent>;
}
;
export default App;import { createElement, getValue } from '@syncfusion/ej2-base';
import { DataManager, Query } from '@syncfusion/ej2-data';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, EditSettingsModel, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Column, Edit, ForeignKey, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let autoComplete: AutoComplete;
const editOption: EditSettingsModel = { allowEditing: true };
const toolbar: ToolbarItems[] = ['Edit', 'Update', 'Cancel'];
const edit = {
create: () => { // to create input element
return createElement('input');
},
destroy: () => { // to destroy the custom component.
autoComplete.destroy();
},
read: () => { // return edited value to update data source
const value: object[] = new DataManager(employeeData).executeLocal(new Query().where('FirstName', 'equal', autoComplete.value));
return value.length && getValue('EmployeeID', value[0]); // to convert foreign key value to local value.
},
write: (args: { rowData: object, column: Column, foreignKeyData: object, element: HTMLElement }) => { // to show the value for date picker
autoComplete = new AutoComplete({
dataSource: new DataManager(employeeData),
fields: { value: args.column.foreignKeyValue },
value: args.foreignKeyData[0][args.column.foreignKeyValue]
});
autoComplete.appendTo(args.element);
}
};
return <GridComponent dataSource={data} height={280} editSettings={editOption}
toolbar={toolbar}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" isPrimaryKey={true} />
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID'
dataSource={employeeData} headerText='Employee Name' width='150' edit={edit} />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' editType='numericedit' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[ForeignKey, Edit, Toolbar]} />
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];
export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];Customize filter UI of foreign key column
The Grid supports customization of the filtering UI for foreign key columns using the filter property. By default, an AutoComplete component renders for filtering. Custom filtering UI can be created by specifying a template function for the filter property. The filter property requires the following callback functions:
-
ui.create: Generates the filter input element. -
ui.write: Initializes the filter component with existing filter values. -
ui.read: Extracts the filter value when filtering is applied.
In the following example, a DropDownList component is rendered as the filter UI for the “EmployeeID” foreign key column. The dataSource property of the DropDownList component is set to the employees data, with the fields property configured to display the “FirstName” field as the text and the “EmployeeID” field as the value. The value property is bound to the current filter value of the column.
import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Filter, ForeignKey } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let dropInstance;
const filterOption = { type: 'Menu' };
const filter = {
ui: {
create: (args) => {
const flValInput = createElement('input', { className: 'flm-input' });
args.target.appendChild(flValInput);
dropInstance = new DropDownList({
dataSource: new DataManager(employeeData),
fields: { text: 'FirstName', value: 'EmployeeID' },
placeholder: 'Select a value',
popupHeight: '200px'
});
dropInstance.appendTo(flValInput);
},
read: (args) => {
args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.text);
},
write: (args) => {
dropInstance.text = (args.filteredValue || '');
}
}
};
return <GridComponent dataSource={data} height={315} allowFiltering={true} filterSettings={filterOption}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Employee Name' width='80' filter={filter}/>
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<Inject services={[ForeignKey, Filter]}/>
</GridComponent>;
};
export default App;import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Column, Filter, FilterSettingsModel, ForeignKey } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let dropInstance: DropDownList;
const filterOption: FilterSettingsModel = { type: 'Menu' };
const filter = {
ui: {
create: (args: { target: Element, column: Column }) => {
const flValInput: HTMLElement = createElement('input', { className: 'flm-input' });
args.target.appendChild(flValInput);
dropInstance = new DropDownList({
dataSource: new DataManager(employeeData),
fields: { text: 'FirstName', value: 'EmployeeID' },
placeholder: 'Select a value',
popupHeight: '200px'
});
dropInstance.appendTo(flValInput);
},
read: (args: { target: Element, column: Column, operator: string, fltrObj: Filter }) => {
args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.text);
},
write: (args: {
column: object, target: Element, parent: any,
filteredValue: string
}) => {
dropInstance.text = (args.filteredValue || '');
}
}
};
return <GridComponent dataSource={data} height={315} allowFiltering={true}
filterSettings={filterOption}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID'
dataSource={employeeData} headerText='Employee Name' width='80' filter={filter} />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[ForeignKey, Filter]} />
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];
export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
var order = JSON.stringify([
{
'OrderID': 10248,
'CustomerID': 'VINET',
'CustomerName': 'Maria ',
'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',
'EmployeeID': 3
},
{
'OrderID': 10249,
'CustomerID': 'TOMSP',
'CustomerName': 'Ana Trujillo',
'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',
'EmployeeID': 5
},
{
'OrderID': 10250,
'CustomerID': 'HANAR',
'CustomerName': 'Antonio Moreno',
'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',
'EmployeeID': 1
},
{
'OrderID': 10251,
'CustomerID': 'VICTE',
'CustomerName': 'Thomas Hardy',
'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',
'EmployeeID': 6
},
{
'OrderID': 10252,
'CustomerID': 'SUPRD',
'CustomerName': 'Christina Berglund',
'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',
'EmployeeID': 2
},
{
'OrderID': 10253,
'CustomerID': 'HANAR',
'CustomerName': 'Hanna Moos',
'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',
'EmployeeID': 4
},
{
'OrderID': 10254,
'CustomerID': 'CHOPS',
'CustomerName': 'Frédérique Citeaux',
'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',
'EmployeeID': 9
},
{
'OrderID': 10255,
'CustomerID': 'RICSU',
'CustomerName': 'Martín Sommer',
'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',
'EmployeeID': 7
},
{
'OrderID': 10256,
'CustomerID': 'WELLI',
'CustomerName': 'Laurence Lebihan',
'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',
'EmployeeID': 8
},
{
'OrderID': 10257,
'CustomerID': 'HILAA',
'CustomerName': 'Elizabeth Lincoln',
'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',
'EmployeeID': 5
},
{
'OrderID': 10258,
'CustomerID': 'ERNSH',
'CustomerName': 'Victoria Ashworth',
'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',
'EmployeeID': 1
},
{
'OrderID': 10259,
'CustomerID': 'CENTC',
'CustomerName': 'Patricio Simpson',
'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',
'EmployeeID': 6
},
{
'OrderID': 10260,
'CustomerID': 'OTTIK',
'CustomerName': 'Francisco Chang',
'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',
'EmployeeID': 2
},
{
'OrderID': 10261,
'CustomerID': 'QUEDE',
'CustomerName': 'Yang Wang',
'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',
'EmployeeID': 7
},
{
'OrderID': 10262,
'CustomerID': 'RATTC',
'CustomerName': 'Pedro Afonso',
'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',
'EmployeeID': 4
},
{
'OrderID': 10263,
'CustomerID': 'ERNSH',
'CustomerName': 'Elizabeth Brown',
'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,
'ShipCountry': 'Austria',
'EmployeeID': 3
},
{
'OrderID': 10264,
'CustomerID': 'FOLKO',
'CustomerName': 'Sven Ottlieb',
'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',
'EmployeeID': 8
},
{
'OrderID': 10265,
'CustomerID': 'BLONP',
'CustomerName': 'Ann Devon',
'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',
'EmployeeID': 3
},
{
'OrderID': 10266,
'CustomerID': 'WARTH',
'CustomerName': 'Roland Mendel',
'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',
'EmployeeID': 2
},
{
'OrderID': 10267,
'CustomerID': 'FRANK',
'CustomerName': 'Aria Cruz',
'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',
'EmployeeID': 4
},
{
'OrderID': 10268,
'CustomerID': 'GROSR',
'CustomerName': 'Diego Roel',
'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',
'EmployeeID': 2
},
{
'OrderID': 10269,
'CustomerID': 'WHITC',
'CustomerName': 'Martine Rancé',
'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',
'EmployeeID': 1
},
{
'OrderID': 10270,
'CustomerID': 'WARTH',
'CustomerName': 'Maria Larsson',
'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',
'EmployeeID': 4
},
{
'OrderID': 10271,
'CustomerID': 'SPLIR',
'CustomerName': 'Peter Franken',
'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',
'EmployeeID': 5
},
{
'OrderID': 10272,
'CustomerID': 'RATTC',
'CustomerName': 'Carine Schmitt',
'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',
'EmployeeID': 3
},
{
'OrderID': 10273,
'CustomerID': 'QUICK',
'CustomerName': 'Paolo Accorti',
'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',
'EmployeeID': 6
},
{
'OrderID': 10274,
'CustomerID': 'VINET',
'CustomerName': 'Lino Rodriguez',
'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',
'EmployeeID': 1
},
{
'OrderID': 10275,
'CustomerID': 'MAGAA',
'CustomerName': 'Eduardo Saavedra',
'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',
'EmployeeID': 3
},
{
'OrderID': 10276,
'CustomerID': 'TORTU',
'CustomerName': 'José Pedro Freyre',
'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',
'EmployeeID': 5
},
{
'OrderID': 10277,
'CustomerID': 'MORGK',
'CustomerName': 'André Fonseca',
'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',
'EmployeeID': 7
},
{
'OrderID': 10278,
'CustomerID': 'BERGS',
'CustomerName': 'Howard Snyder',
'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',
'EmployeeID': 9
},
{
'OrderID': 10279,
'CustomerID': 'LEHMS',
'CustomerName': 'Manuel Pereira',
'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',
'EmployeeID': 2
},
{
'OrderID': 10280,
'CustomerID': 'BERGS',
'CustomerName': 'Mario Pontes',
'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',
'EmployeeID': 4
},
{
'OrderID': 10281,
'CustomerID': 'ROMEY',
'CustomerName': 'Carlos Hernández',
'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',
'EmployeeID': 6
},
{
'OrderID': 10282,
'CustomerID': 'ROMEY',
'CustomerName': 'Yoshi Latimer',
'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',
'EmployeeID': 8
},
{
'OrderID': 10283,
'CustomerID': 'LILAS',
'CustomerName': 'Patricia McKenna',
'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',
'EmployeeID': 9
},
{
'OrderID': 10284,
'CustomerID': 'LEHMS',
'CustomerName': 'Helen Bennett',
'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',
'EmployeeID': 6
},
{
'OrderID': 10285,
'CustomerID': 'QUICK',
'CustomerName': 'Philip Cramer',
'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',
'EmployeeID': 3
},
{
'OrderID': 10286,
'CustomerID': 'QUICK',
'CustomerName': 'Daniel Tonini',
'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',
'EmployeeID': 1
},
{
'OrderID': 10287,
'CustomerID': 'RICAR',
'CustomerName': 'Annette Roulet',
'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',
'EmployeeID': 8
},
{
'OrderID': 10288,
'CustomerID': 'REGGC',
'CustomerName': 'Yoshi Tannamuri',
'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',
'EmployeeID': 4
},
{
'OrderID': 10289,
'CustomerID': 'BSBEV',
'CustomerName': 'John Steel',
'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',
'EmployeeID': 2
},
{
'OrderID': 10290,
'CustomerID': 'COMMI',
'CustomerNames': 'Renate Messner',
'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',
'EmployeeID': 5
},
{
'OrderID': 10291,
'CustomerID': 'QUEDE',
'CustomerName': 'Jaime Yorres',
'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',
'EmployeeID': 7
},
{
'OrderID': 10292,
'CustomerID': 'TRADH',
'CustomerName': 'Carlos González',
'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',
'EmployeeID': 3
},
{
'OrderID': 10293,
'CustomerID': 'TORTU',
'CustomerName': 'Felipe Izquierdo',
'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',
'EmployeeID': 1
},
{
'OrderID': 10294,
'CustomerID': 'RATTC',
'CustomerName': 'Fran Wilson',
'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',
'EmployeeID': 2
},
{
'OrderID': 10295,
'CustomerID': 'VINET',
'CustomerName': 'Giovanni Rovelli',
'OrderDate': '1996-09-02T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 1.15,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France',
'EmployeeID': 3
},
{
'OrderID': 10296,
'CustomerID': 'LILAS',
'CustomerName': 'Catherine Dewey',
'OrderDate': '1996-09-03T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 0.12,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela',
'EmployeeID': 4
},
{
'OrderID': 10297,
'CustomerID': 'BLONP',
'CustomerName': 'Jean Fresnière',
'OrderDate': '1996-09-04T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 5.74,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France',
'EmployeeID': 5
},
{
'OrderID': 10298,
'CustomerID': 'HUNGO',
'CustomerName': 'Alexander Feuer',
'OrderDate': '1996-09-05T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 168.22,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland',
'EmployeeID': 6
},
{
'OrderID': 10299,
'CustomerID': 'RICAR',
'CustomerName': 'Simon Crowther',
'OrderDate': '1996-09-06T00:00:00.000Z',
'ShippedDate': '1996-09-13T00:00:00.000Z',
'Freight': 29.76,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil',
'EmployeeID': 7
},
{
'OrderID': 10300,
'CustomerID': 'MAGAA',
'CustomerNames': 'Yvonne Moncada',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 17.68,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy',
'EmployeeID': 8
},
{
'OrderID': 10301,
'CustomerID': 'WANDK',
'CustomerName': 'Rene Phillips',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 45.08,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany',
'EmployeeID': 9
},
{
'OrderID': 10302,
'CustomerID': 'SUPRD',
'CustomerName': 'Pirkko Koskitalo',
'OrderDate': '1996-09-10T00:00:00.000Z',
'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 6.27,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium',
'EmployeeID': 2
},
{
'OrderID': 10303,
'CustomerID': 'GODOS',
'CustomerName': 'Paula Parente',
'OrderDate': '1996-09-11T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 107.83,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain',
'EmployeeID': 4
},
{
'OrderID': 10304,
'CustomerID': 'TORTU',
'CustomerName': 'Karl Jablonski',
'OrderDate': '1996-09-12T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 63.79,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico',
'EmployeeID': 8
},
{
'OrderID': 10305,
'CustomerID': 'OLDWO',
'CustomerName': 'Matti Karttunen',
'OrderDate': '1996-09-13T00:00:00.000Z',
'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 257.62,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA',
'EmployeeID': 6
},
{
'OrderID': 10306,
'CustomerID': 'ROMEY',
'CustomerName': 'Zbyszek Piestrzeniewicz',
'OrderDate': '1996-09-16T00:00:00.000Z',
'ShippedDate': '1996-09-23T00:00:00.000Z',
'Freight': 7.56,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain',
'EmployeeID': 3
},
{
'OrderID': 10307,
'CustomerID': 'LONEP',
'CustomerName': 'Zbyszek Piestrzeniewicz',
'OrderDate': '1996-09-17T00:00:00.000Z',
'ShippedDate': '1996-09-25T00:00:00.000Z',
'Freight': 0.56,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA',
'EmployeeID': 1
}
]);
export let orderDetails: object[] = JSON.parse(order, function (field, value) {
var dupValue = value;
if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
var arr = dupValue.split(/[^0-9]/);
value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10));
}
return value;
});
export let customerData: object[] = [
{
'CustomerID': 'ALFKI',
'ContactName': 'Maria ',
'CompanyName': 'Alfreds Futterkiste',
'Address': 'Obere Str. 57',
'Country': 'Germany'
},
{
'CustomerID': 'ANATR',
'ContactName': 'Ana Trujillo',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'Address': 'Avda. de la Constitución 2222',
'Country': 'Mexico'
},
{
'CustomerID': 'ANTON',
'ContactName': 'Antonio Moreno',
'CompanyName': 'Antonio Moreno Taquería',
'Address': 'Mataderos 2312',
'Country': 'Mexico'
},
{
'CustomerID': 'AROUT',
'ContactName': 'Thomas Hardy',
'CompanyName': 'Around the Horn',
'Address': '120 Hanover Sq.',
'Country': 'UK'
},
{
'CustomerID': 'BERGS',
'ContactName': 'Christina Berglund',
'CompanyName': 'Berglunds snabbköp',
'Address': 'Berguvsvägen 8',
'Country': 'Sweden'
},
{
'CustomerID': 'BLAUS',
'ContactName': 'Hanna Moos',
'CompanyName': 'Blauer See Delikatessen',
'Address': 'Forsterstr. 57',
'Country': 'Germany'
},
{
'CustomerID': 'BLONP',
'ContactName': 'Frédérique Citeaux',
'CompanyName': 'Blondesddsl père et fils',
'Address': '24, place Kléber',
'Country': 'France'
},
{
'CustomerID': 'BOLID',
'ContactName': 'Martín Sommer',
'CompanyName': 'Bólido Comidas preparadas',
'Address': 'C/ Araquil, 67',
'Country': 'Spain'
},
{
'CustomerID': 'BONAP',
'ContactName': 'Laurence Lebihan',
'CompanyName': 'Bon app',
'Address': '12, rue des Bouchers',
'Country': 'France'
},
{
'CustomerID': 'BOTTM',
'ContactName': 'Elizabeth Lincoln',
'CompanyName': 'Bottom-Dollar Markets',
'Address': '23 Tsawassen Blvd.',
'Country': 'Canada'
},
{
'CustomerID': 'BSBEV',
'ContactName': 'Victoria Ashworth',
'CompanyName': 'B\'s Beverages',
'Address': 'Fauntleroy Circus',
'Country': 'UK'
},
{
'CustomerID': 'CACTU',
'ContactName': 'Patricio Simpson',
'CompanyName': 'Cactus Comidas para llevar',
'Address': 'Cerrito 333',
'Country': 'Argentina'
},
{
'CustomerID': 'CENTC',
'ContactName': 'Francisco Chang',
'CompanyName': 'Centro comercial Moctezuma',
'Address': 'Sierras de Granada 9993',
'Country': 'Mexico'
},
{
'CustomerID': 'CHOPS',
'ContactName': 'Yang Wang',
'CompanyName': 'Chop-suey Chinese',
'Address': 'Hauptstr. 29',
'Country': 'Switzerland'
},
{
'CustomerID': 'COMMI',
'ContactName': 'Pedro Afonso',
'CompanyName': 'Comércio Mineiro',
'Address': 'Av. dos Lusíadas, 23',
'Country': 'Brazil'
},
{
'CustomerID': 'CONSH',
'ContactName': 'Elizabeth Brown',
'CompanyName': 'Consolidated Holdings',
'Address': 'Berkeley Gardens 12 Brewery',
'Country': 'UK'
},
{
'CustomerID': 'DRACD',
'ContactName': 'Sven Ottlieb',
'CompanyName': 'Drachenblut Delikatessen',
'Address': 'Walserweg 21',
'Country': 'Germany'
},
{
'CustomerID': 'DUMON',
'ContactName': 'Janine Labrune',
'CompanyName': 'Du monde entier',
'Address': '67, rue des Cinquante Otages',
'Country': 'France'
},
{
'CustomerID': 'EASTC',
'ContactName': 'Ann Devon',
'CompanyName': 'Eastern Connection',
'Address': '35 King George',
'Country': 'UK'
},
{
'CustomerID': 'ERNSH',
'ContactName': 'Roland Mendel',
'CompanyName': 'Ernst Handel',
'Address': 'Kirchgasse 6',
'Country': 'Austria'
},
{
'CustomerID': 'FAMIA',
'ContactName': 'Aria Cruz',
'CompanyName': 'Familia Arquibaldo',
'Address': 'Rua Orós, 92',
'Country': 'Brazil'
},
{
'CustomerID': 'FISSA',
'ContactName': 'Diego Roel',
'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.',
'Address': 'C/ Moralzarzal, 86',
'Country': 'Spain'
},
{
'CustomerID': 'FOLIG',
'ContactName': 'Martine Rancé',
'CompanyName': 'Folies gourmandes',
'Address': '184, chaussée de Tournai',
'Country': 'France'
},
{
'CustomerID': 'FOLKO',
'ContactName': 'Maria Larsson',
'CompanyName': 'Folk och fä HB',
'Address': 'Åkergatan 24',
'Country': 'Sweden'
},
{
'CustomerID': 'FRANK',
'ContactName': 'Peter Franken',
'CompanyName': 'Frankenversand',
'Address': 'Berliner Platz 43',
'Country': 'Germany'
},
{
'CustomerID': 'FRANR',
'ContactName': 'Carine Schmitt',
'CompanyName': 'France restauration',
'Address': '54, rue Royale',
'Country': 'France'
},
{
'CustomerID': 'FRANS',
'ContactName': 'Paolo Accorti',
'CompanyName': 'Franchi S.p.A.',
'Address': 'Via Monte Bianco 34',
'Country': 'Italy'
},
{
'CustomerID': 'FURIB',
'ContactName': 'Lino Rodriguez',
'CompanyName': 'Furia Bacalhau e Frutos do Mar',
'Address': 'Jardim das rosas n. 32',
'Country': 'Portugal'
},
{
'CustomerID': 'GALED',
'ContactName': 'Eduardo Saavedra',
'CompanyName': 'Galería del gastrónomo',
'Address': 'Rambla de Cataluña, 23',
'Country': 'Spain'
},
{
'CustomerID': 'GODOS',
'ContactName': 'José Pedro Freyre',
'CompanyName': 'Godos Cocina Típica',
'Address': 'C/ Romero, 33',
'Country': 'Spain'
},
{
'CustomerID': 'GOURL',
'ContactName': 'André Fonseca',
'CompanyName': 'Gourmet Lanchonetes',
'Address': 'Av. Brasil, 442',
'Country': 'Brazil'
},
{
'CustomerID': 'GREAL',
'ContactName': 'Howard Snyder',
'CompanyName': 'Great Lakes Food Market',
'Address': '2732 Baker Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'GROSR',
'ContactName': 'Manuel Pereira',
'CompanyName': 'GROSELLA-Restaurante',
'Address': '5ª Ave. Los Palos Grandes',
'Country': 'Venezuela'
},
{
'CustomerID': 'HANAR',
'ContactName': 'Mario Pontes',
'CompanyName': 'Hanari Carnes',
'Address': 'Rua do Paço, 67',
'Country': 'Brazil'
},
{
'CustomerID': 'HILAA',
'ContactName': 'Carlos Hernández',
'CompanyName': 'HILARION-Abastos',
'Address': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'Country': 'Venezuela'
},
{
'CustomerID': 'HUNGC',
'ContactName': 'Yoshi Latimer',
'CompanyName': 'Hungry Coyote Import Store',
'Address': 'City Center Plaza 516 Main St.',
'Country': 'USA'
},
{
'CustomerID': 'HUNGO',
'ContactName': 'Patricia McKenna',
'CompanyName': 'Hungry Owl All-Night Grocers',
'Address': '8 Johnstown Road',
'Country': 'Ireland'
},
{
'CustomerID': 'ISLAT',
'ContactName': 'Helen Bennett',
'CompanyName': 'Island Trading',
'Address': 'Garden House Crowther Way',
'Country': 'UK'
},
{
'CustomerID': 'KOENE',
'ContactName': 'Philip Cramer',
'CompanyName': 'Königlich Essen',
'Address': 'Maubelstr. 90',
'Country': 'Germany'
},
{
'CustomerID': 'LACOR',
'ContactName': 'Daniel Tonini',
'CompanyName': 'La corne d\'abondance',
'Address': '67, avenue de l\'Europe',
'Country': 'France'
},
{
'CustomerID': 'LAMAI',
'ContactName': 'Annette Roulet',
'CompanyName': 'La maison d\'Asie',
'Address': '1 rue Alsace-Lorraine',
'Country': 'France'
},
{
'CustomerID': 'LAUGB',
'ContactName': 'Yoshi Tannamuri',
'CompanyName': 'Laughing Bacchus Wine Cellars',
'Address': '1900 Oak St.',
'Country': 'Canada'
},
{
'CustomerID': 'LAZYK',
'ContactName': 'John Steel',
'CompanyName': 'Lazy K Kountry Store',
'Address': '12 Orchestra Terrace',
'Country': 'USA'
},
{
'CustomerID': 'LEHMS',
'ContactName': 'Renate Messner',
'CompanyName': 'Lehmanns Marktstand',
'Address': 'Magazinweg 7',
'Country': 'Germany'
},
{
'CustomerID': 'LETSS',
'ContactName': 'Jaime Yorres',
'CompanyName': 'Let\'s Stop N Shop',
'Address': '87 Polk St. Suite 5',
'Country': 'USA'
},
{
'CustomerID': 'LILAS',
'ContactName': 'Carlos González',
'CompanyName': 'LILA-Supermercado',
'Address': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'Country': 'Venezuela'
},
{
'CustomerID': 'LINOD',
'ContactName': 'Felipe Izquierdo',
'CompanyName': 'LINO-Delicateses',
'Address': 'Ave. 5 de Mayo Porlamar',
'Country': 'Venezuela'
},
{
'CustomerID': 'LONEP',
'ContactName': 'Fran Wilson',
'CompanyName': 'Lonesome Pine Restaurant',
'Address': '89 Chiaroscuro Rd.',
'Country': 'USA'
},
{
'CustomerID': 'MAGAA',
'ContactName': 'Giovanni Rovelli',
'CompanyName': 'Magazzini Alimentari Riuniti',
'Address': 'Via Ludovico il Moro 22',
'Country': 'Italy'
},
{
'CustomerID': 'MAISD',
'ContactName': 'Catherine Dewey',
'CompanyName': 'Maison Dewey',
'Address': 'Rue Joseph-Bens 532',
'Country': 'Belgium'
},
{
'CustomerID': 'MEREP',
'ContactName': 'Jean Fresnière',
'CompanyName': 'Mère Paillarde',
'Address': '43 rue St. Laurent',
'Country': 'Canada'
},
{
'CustomerID': 'MORGK',
'ContactName': 'Alexander Feuer',
'CompanyName': 'Morgenstern Gesundkost',
'Address': 'Heerstr. 22',
'Country': 'Germany'
},
{
'CustomerID': 'NORTS',
'ContactName': 'Simon Crowther',
'CompanyName': 'North/South',
'Address': 'South House 300 Queensbridge',
'Country': 'UK'
},
{
'CustomerID': 'OCEAN',
'ContactName': 'Yvonne Moncada',
'CompanyName': 'Océano Atlántico Ltda.',
'Address': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'Country': 'Argentina'
},
{
'CustomerID': 'OLDWO',
'ContactName': 'Rene Phillips',
'CompanyName': 'Old World Delicatessen',
'Address': '2743 Bering St.',
'Country': 'USA'
},
{
'CustomerID': 'OTTIK',
'ContactName': 'Henriette Pfalzheim',
'CompanyName': 'Ottilies Käseladen',
'Address': 'Mehrheimerstr. 369',
'Country': 'Germany'
},
{
'CustomerID': 'PARIS',
'ContactName': 'Marie Bertrand',
'CompanyName': 'Paris spécialités',
'Address': '265, boulevard Charonne',
'Country': 'France'
},
{
'CustomerID': 'PERIC',
'ContactName': 'Guillermo Fernández',
'CompanyName': 'Pericles Comidas clásicas',
'Address': 'Calle Dr. Jorge Cash 321',
'Country': 'Mexico'
},
{
'CustomerID': 'PICCO',
'ContactName': 'Georg Pipps',
'CompanyName': 'Piccolo und mehr',
'Address': 'Geislweg 14',
'Country': 'Austria'
},
{
'CustomerID': 'PRINI',
'ContactName': 'Isabel de Castro',
'CompanyName': 'Princesa Isabel Vinhos',
'Address': 'Estrada da saúde n. 58',
'Country': 'Portugal'
},
{
'CustomerID': 'QUEDE',
'ContactName': 'Bernardo Batista',
'CompanyName': 'Que Delícia',
'Address': 'Rua da Panificadora, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'QUEEN',
'ContactName': 'Lúcia Carvalho',
'CompanyName': 'Queen Cozinha',
'Address': 'Alameda dos Canàrios, 891',
'Country': 'Brazil'
},
{
'CustomerID': 'QUICK',
'ContactName': 'Horst Kloss',
'CompanyName': 'QUICK-Stop',
'Address': 'Taucherstraße 10',
'Country': 'Germany'
},
{
'CustomerID': 'RANCH',
'ContactName': 'Sergio Gutiérrez',
'CompanyName': 'Rancho grande',
'Address': 'Av. del Libertador 900',
'Country': 'Argentina'
},
{
'CustomerID': 'RATTC',
'ContactName': 'Paula Wilson',
'CompanyName': 'Rattlesnake Canyon Grocery',
'Address': '2817 Milton Dr.',
'Country': 'USA'
},
{
'CustomerID': 'REGGC',
'ContactName': 'Maurizio Moroni',
'CompanyName': 'Reggiani Caseifici',
'Address': 'Strada Provinciale 124',
'Country': 'Italy'
},
{
'CustomerID': 'RICAR',
'ContactName': 'Janete Limeira',
'CompanyName': 'Ricardo Adocicados',
'Address': 'Av. Copacabana, 267',
'Country': 'Brazil'
},
{
'CustomerID': 'RICSU',
'ContactName': 'Michael Holz',
'CompanyName': 'Richter Supermarkt',
'Address': 'Grenzacherweg 237',
'Country': 'Switzerland'
},
{
'CustomerID': 'ROMEY',
'ContactName': 'Alejandra Camino',
'CompanyName': 'Romero y tomillo',
'Address': 'Gran Vía, 1',
'Country': 'Spain'
},
{
'CustomerID': 'SANTG',
'ContactName': 'Jonas Bergulfsen',
'CompanyName': 'Santé Gourmet',
'Address': 'Erling Skakkes gate 78',
'Country': 'Norway'
},
{
'CustomerID': 'SAVEA',
'ContactName': 'Jose Pavarotti',
'CompanyName': 'Save-a-lot Markets',
'Address': '187 Suffolk Ln.',
'Country': 'USA'
},
{
'CustomerID': 'SEVES',
'ContactName': 'Hari Kumar',
'CompanyName': 'Seven Seas Imports',
'Address': '90 Wadhurst Rd.',
'Country': 'UK'
},
{
'CustomerID': 'SIMOB',
'ContactName': 'Jytte Petersen',
'CompanyName': 'Simons bistro',
'Address': 'Vinbæltet 34',
'Country': 'Denmark'
},
{
'CustomerID': 'SPECD',
'ContactName': 'Dominique Perrier',
'CompanyName': 'Spécialités du monde',
'Address': '25, rue Lauriston',
'Country': 'France'
},
{
'CustomerID': 'SPLIR',
'ContactName': 'Art Braunschweiger',
'CompanyName': 'Split Rail Beer & Ale',
'Address': 'P.O. Box 555',
'Country': 'USA'
},
{
'CustomerID': 'SUPRD',
'ContactName': 'Pascale Cartrain',
'CompanyName': 'Suprêmes délices',
'Address': 'Boulevard Tirou, 255',
'Country': 'Belgium'
},
{
'CustomerID': 'THEBI',
'ContactName': 'Liz Nixon',
'CompanyName': 'The Big Cheese',
'Address': '89 Jefferson Way Suite 2',
'Country': 'USA'
},
{
'CustomerID': 'THECR',
'ContactName': 'Liu Wong',
'CompanyName': 'The Cracker Box',
'Address': '55 Grizzly Peak Rd.',
'Country': 'USA'
},
{
'CustomerID': 'TOMSP',
'ContactName': 'Karin Josephs',
'CompanyName': 'Toms Spezialitäten',
'Address': 'Luisenstr. 48',
'Country': 'Germany'
},
{
'CustomerID': 'TORTU',
'ContactName': 'Miguel Angel Paolino',
'CompanyName': 'Tortuga Restaurante',
'Address': 'Avda. Azteca 123',
'Country': 'Mexico'
},
{
'CustomerID': 'TRADH',
'ContactName': 'Anabela Domingues',
'CompanyName': 'Tradição Hipermercados',
'Address': 'Av. Inês de Castro, 414',
'Country': 'Brazil'
},
{
'CustomerID': 'TRAIH',
'ContactName': 'Helvetius Nagy',
'CompanyName': 'Trail\'s Head Gourmet Provisioners',
'Address': '722 DaVinci Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'VAFFE',
'ContactName': 'Palle Ibsen',
'CompanyName': 'Vaffeljernet',
'Address': 'Smagsloget 45',
'Country': 'Denmark'
},
{
'CustomerID': 'VICTE',
'ContactName': 'Mary Saveley',
'CompanyName': 'Victuailles en stock',
'Address': '2, rue du Commerce',
'Country': 'France'
},
{
'CustomerID': 'VINET',
'ContactName': 'Paul Henriot',
'CompanyName': 'Vins et alcools Chevalier',
'Address': '59 rue de l\'Abbaye',
'Country': 'France'
},
{
'CustomerID': 'WANDK',
'ContactName': 'Rita Müller',
'CompanyName': 'Die Wandernde Kuh',
'Address': 'Adenauerallee 900',
'Country': 'Germany'
},
{
'CustomerID': 'WARTH',
'ContactName': 'Pirkko Koskitalo',
'CompanyName': 'Wartian Herkku',
'Address': 'Torikatu 38',
'Country': 'Finland'
},
{
'CustomerID': 'WELLI',
'ContactName': 'Paula Parente',
'CompanyName': 'Wellington Importadora',
'Address': 'Rua do Mercado, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'WHITC',
'ContactName': 'Karl Jablonski',
'CompanyName': 'White Clover Markets',
'Address': '305 - 14th Ave. S. Suite 3B',
'Country': 'USA'
},
{
'CustomerID': 'WILMK',
'ContactName': 'Matti Karttunen',
'CompanyName': 'Wilman Kala',
'Address': 'Keskuskatu 45',
'Country': 'Finland'
},
{
'CustomerID': 'WOLZA',
'ContactName': 'Zbyszek Piestrzeniewicz',
'CompanyName': 'Wolski Zajazd',
'Address': 'ul. Filtrowa 68',
'Country': 'Poland'
}
];Use filter bar template in foreign key column
The filter bar for foreign key columns can be customized using the filterBarTemplate property. This enables customization of the filter bar with a custom component or HTML template.
Filter Bar vs Filter Menu:
- Filter Bar: A simple input field that appears directly below each column header.
- Filter Menu: Opens a popup with advanced filtering options.
In the following example, the “EmployeeID” column is a foreign key column with the filter function defined as the filter bar template. The filter function returns a DropDownList component for the filter bar. When filtering, an employee name is selected from the dropdown, and the Grid filters rows based on the selected “EmployeeID”.
import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Filter, ForeignKey } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let grid;
const filterBarTemplate = {
create: (args) => {
return createElement('input', { className: 'flm-input' });
},
write: (args) => {
employeeData.splice(0, 0, { 'FirstName': 'All' }); // for clear filtering
const dropInstance = new DropDownList({
change: (arg) => {
if (grid) {
if (arg.value !== 'All') {
grid.filterByColumn('EmployeeID', 'equal', arg.value);
}
else {
grid.removeFilteredColsByField('EmployeeID');
}
}
},
dataSource: new DataManager(employeeData),
fields: { text: 'FirstName' },
index: 0,
placeholder: 'Select a value',
popupHeight: '200px'
});
dropInstance.appendTo(args.element);
}
};
return <GridComponent dataSource={data} height={280} allowFiltering={true} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right"/>
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Employee Name' width='150' filterBarTemplate={filterBarTemplate}/>
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<Inject services={[ForeignKey, Filter]}/>
</GridComponent>;
}
;
export default App;import { createElement } from '@syncfusion/ej2-base';
import { DataManager } from '@syncfusion/ej2-data';
import { ChangeEventArgs, DropDownList } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Column, Filter, ForeignKey, Grid } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let grid: Grid | null;
const filterBarTemplate = {
create: (args: { element: Element, column: Column }) => {
return createElement('input', { className: 'flm-input' });
},
write: (args: { element: Element, column: Column }) => {
employeeData.splice(0, 0, { 'FirstName': 'All' }); // for clear filtering
const dropInstance: DropDownList = new DropDownList({
change: (arg: ChangeEventArgs) => {
if (grid) {
if (arg.value !== 'All') {
grid.filterByColumn('EmployeeID', 'equal', arg.value);
}
else {
grid.removeFilteredColsByField('EmployeeID');
}
}
},
dataSource: new DataManager(employeeData),
fields: { text: 'FirstName' },
index: 0,
placeholder: 'Select a value',
popupHeight: '200px'
});
dropInstance.appendTo(args.element as HTMLElement);
}
};
return <GridComponent dataSource={data} height={280} allowFiltering={true} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign="Right" />
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID'
dataSource={employeeData} headerText='Employee Name' width='150' filterBarTemplate={filterBarTemplate} />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<Inject services={[ForeignKey, Filter]} />
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];
export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];Perform aggregation in foreign key column
By default, aggregations (sum, average, count, etc.) are not supported in foreign key columns because they display text values from related data sources. Aggregation can be achieved using customAggregate.
Steps to aggregate foreign key data:
- Define a foreign key column in the Grid.
- Implement a custom aggregate function to calculate the aggregation based on the foreign key values.
- Set the
customAggregateproperty to the custom aggregate function.
How custom aggregate works:
The custom aggregate function receives the Grid data and processes it to calculate a meaningful result. In the following example, the customAggregateFn function:
- Calls
getForeignDatato get related data from the foreign source based on “EmployeeID”. - Filters the data to find all records with “FirstName: Margaret”.
- Counts how many times “Margaret” appears.
- Displays the result (“Margaret: 8”) in the Grid footer using the
#footerTemplatereference.
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Aggregate, ForeignKey, getForeignData } from '@syncfusion/ej2-react-grids';
import { AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let grid;
const custom = (props) => {
return (<span>Count of Margaret: {props.Custom}</span>);
};
// Custom Aggregate function for foreign column
const customAggregateFn = (args, column) => {
const proxy = grid;
return args.result.filter((dObj) => {
return getValue('FirstName', getForeignData(proxy.getColumnByField(column.field), dObj)[0]) === 'Margaret';
}).length;
};
return <GridComponent dataSource={data} height={280} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right'/>
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Employee Name' width='150'/>
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2'/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100'/>
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='EmployeeID' type='Custom' customAggregate={customAggregateFn} footerTemplate={custom}/>
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[ForeignKey, Aggregate]}/>
</GridComponent>;
}
;
export default App;import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { Aggregate, Column, ForeignKey, getForeignData, Grid } from '@syncfusion/ej2-react-grids';
import { AggregateColumnDirective, AggregateColumnsDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, employeeData } from './datasource';
function App() {
let grid: Grid | null;
const custom = (props: any): any => {
return (<span>Count of Margaret: {props.Custom}</span>)
}
// Custom Aggregate function for foreign column
const customAggregateFn = (args: any, column: Column) => {
const proxy: Grid = grid as Grid;
return args.result.filter((dObj: object) => {
return getValue('FirstName',
getForeignData(proxy.getColumnByField(column.field), dObj)[0]) === 'Margaret';
}).length;
};
return <GridComponent dataSource={data} height={280} ref={g => grid = g}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right' />
<ColumnDirective field='EmployeeID' foreignKeyValue='FirstName' foreignKeyField='EmployeeID'
dataSource={employeeData} headerText='Employee Name' width='150' />
<ColumnDirective field='Freight' headerText='Freight' width='80' textAlign="Right" format='C2' />
<ColumnDirective field='ShipCountry' headerText='Ship Country' width='100' />
</ColumnsDirective>
<AggregatesDirective>
<AggregateDirective>
<AggregateColumnsDirective>
<AggregateColumnDirective field='EmployeeID' type='Custom'
customAggregate={customAggregateFn} footerTemplate={custom} />
</AggregateColumnsDirective>
</AggregateDirective>
</AggregatesDirective>
<Inject services={[ForeignKey, Aggregate]} />
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];
export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];Render foreign key value in column template
Foreign key values can be rendered within column templates to enhance display of related data. This enables more meaningful representation with custom formatting, styling, or additional information beyond just displaying the foreign key value. To render foreign key values in a column template, define the template property for the column. The template property accepts either an HTML element or a function that returns the desired HTML element. Within the template, access the foreign key data using the row data properties.
import { ColumnDirective, ColumnsDirective, GridComponent, ForeignKey, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, customerData } from './datasource';
function App() {
const navToAccount = (id, event) => {
event.preventDefault();
window.history.pushState(
'',
'changed',
`../Account/AccountDetail.cshtml?custid=0&accountId=${id}`
);
};
const foreignkeyTemplate = (props) => {
if (!props.foreignKeyData) return null;
return (
<a
href="javascript:void(0)"
onClick={(event) => navToAccount(props.OrderID, event)}>
{props.foreignKeyData.ContactName}
</a>
);
};
return (
<div>
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field="CustomerID" headerText="Customer Name" width="150" foreignKeyValue="ContactName" foreignKeyField="CustomerID" dataSource={customerData} template={foreignkeyTemplate}></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' format='C' textAlign="Right" width='120' />
<ColumnDirective field="ShipName" headerText="Ship Name" width={120} />
<ColumnDirective field="ShipCountry" headerText="Ship Country" width={120} />
</ColumnsDirective>
<Inject services={[ForeignKey]} />
</GridComponent>
</div>
)
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, ForeignKey, Inject } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data, customerData } from './datasource';
function App() {
const navToAccount = (id, event) => {
event.preventDefault();
window.history.pushState(
'',
'changed',
`../Account/AccountDetail.cshtml?custid=0&accountId=${id}`
);
};
const foreignkeyTemplate = (props) => {
if (!props.foreignKeyData) return null;
return (
<a
href="javascript:void(0)"
onClick={(event) => navToAccount(props.OrderID, event)}>
{props.foreignKeyData.ContactName}
</a>
);
};
return (
<div>
<GridComponent dataSource={data} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='OrderID' width='100' />
<ColumnDirective field="CustomerID" headerText="Customer Name" width="150" foreignKeyValue="ContactName" foreignKeyField="CustomerID" dataSource={customerData} template={foreignkeyTemplate}></ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' format='C' textAlign="Right" width='120' />
<ColumnDirective field="ShipName" headerText="Ship Name" width={120} />
<ColumnDirective field="ShipCountry" headerText="Ship Country" width={120} />
</ColumnsDirective>
<Inject services={[ForeignKey]} />
</GridComponent>
</div>
)
}
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate:new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0, OrderStatus: "Pending"
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1, OrderStatus: "Confirmed"
},
{
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', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0, OrderStatus: "Shipped"
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0, OrderStatus: "Pending"
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0, OrderStatus: "Cancelled"
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0, OrderStatus: "Shipped"
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1, OrderStatus: "Confirmed"
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0, OrderStatus: "Pending"
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1, OrderStatus: "Confirmed"
},
{
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', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0, OrderStatus: "Shipped"
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0, OrderStatus: "Cancelled"
},
{
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', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1, OrderStatus: "Confirmed"
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0, OrderStatus: "Shipped"
},
{
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', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1, OrderStatus: "Pending"
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0, OrderStatus: "Confirmed"
}
];
export let customerData = [
{
CustomerID: 'VINET',
ContactName: 'Paul Henriot',
CompanyName: 'Vins et alcools Chevalier',
Address: "59 rue de l'Abbaye",
Country: 'France',
},
{
CustomerID: 'TOMSP',
ContactName: 'Karin Josephs',
CompanyName: 'Toms Spezialitäten',
Address: 'Luisenstr. 48',
Country: 'Germany',
},
{
CustomerID: 'HANAR',
ContactName: 'Mario Pontes',
CompanyName: 'Hanari Carnes',
Address: 'Rua do Paço, 67',
Country: 'Brazil',
},
{
CustomerID: 'VICTE',
ContactName: 'Mary Saveley',
CompanyName: 'Victuailles en stock',
Address: '2, rue du Commerce',
Country: 'France',
},
{
CustomerID: 'SUPRD',
ContactName: 'Pascale Cartrain',
CompanyName: 'Suprêmes délices',
Address: 'Boulevard Tirou, 255',
Country: 'Belgium',
},
{
CustomerID: 'CHOPS',
ContactName: 'Yang Wang',
CompanyName: 'Chop-suey Chinese',
Address: 'Hauptstr. 29',
Country: 'Switzerland',
},
{
CustomerID: 'RICSU',
ContactName: 'Michael Holz',
CompanyName: 'Richter Supermarkt',
Address: 'Grenzacherweg 237',
Country: 'Switzerland',
},
{
CustomerID: 'WELLI',
ContactName: 'Paula Parente',
CompanyName: 'Wellington Importadora',
Address: 'Rua do Mercado, 12',
Country: 'Brazil',
},
{
CustomerID: 'HILAA',
ContactName: 'Carlos Hernández',
CompanyName: 'HILARION-Abastos',
Address: 'Carrera 22 con Ave. Carlos Soublette #8-35',
Country: 'Venezuela',
},
{
CustomerID: 'ERNSH',
ContactName: 'Roland Mendel',
CompanyName: 'Ernst Handel',
Address: 'Kirchgasse 6',
Country: 'Austria',
},
{
CustomerID: 'CENTC',
ContactName: 'Francisco Chang',
CompanyName: 'Centro comercial Moctezuma',
Address: 'Sierras de Granada 9993',
Country: 'Mexico',
},
{
CustomerID: 'OTTIK',
ContactName: 'Henriette Pfalzheim',
CompanyName: 'Ottilies Käseladen',
Address: 'Mehrheimerstr. 369',
Country: 'Germany',
},
{
CustomerID: 'QUEDE',
ContactName: 'Bernardo Batista',
CompanyName: 'Que Delícia',
Address: 'Rua da Panificadora, 12',
Country: 'Brazil',
},
{
CustomerID: 'RATTC',
ContactName: 'Paula Wilson',
CompanyName: 'Rattlesnake Canyon Grocery',
Address: '2817 Milton Dr.',
Country: 'USA',
}
]export let data: Object[] = [
{
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', Mask: '1111', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0, OrderStatus: "Pending"
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', Mask: '2222', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1, OrderStatus: "Confirmed"
},
{
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', Mask: '3333', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0, OrderStatus: "Shipped"
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', Mask: '4444', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0, OrderStatus: "Pending"
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', Mask: '5555', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0, OrderStatus: "Cancelled"
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', Mask: '6666', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0, OrderStatus: "Shipped"
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', Mask: '7777', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1, OrderStatus: "Confirmed"
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', Mask: '8888', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0, OrderStatus: "Pending"
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', Mask: '9999', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1, OrderStatus: "Confirmed"
},
{
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', Mask: '1234', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0, OrderStatus: "Shipped"
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', Mask: '2345', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0, OrderStatus: "Cancelled"
},
{
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', Mask: '3456', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1, OrderStatus: "Confirmed"
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', Mask: '4567', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0, OrderStatus: "Shipped"
},
{
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', Mask: '5678', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1, OrderStatus: "Pending"
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', Mask: '6789', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0, OrderStatus: "Confirmed"
}
];
export let customerData: Object[] = [
{
CustomerID: 'VINET',
ContactName: 'Paul Henriot',
CompanyName: 'Vins et alcools Chevalier',
Address: "59 rue de l'Abbaye",
Country: 'France',
},
{
CustomerID: 'TOMSP',
ContactName: 'Karin Josephs',
CompanyName: 'Toms Spezialitäten',
Address: 'Luisenstr. 48',
Country: 'Germany',
},
{
CustomerID: 'HANAR',
ContactName: 'Mario Pontes',
CompanyName: 'Hanari Carnes',
Address: 'Rua do Paço, 67',
Country: 'Brazil',
},
{
CustomerID: 'VICTE',
ContactName: 'Mary Saveley',
CompanyName: 'Victuailles en stock',
Address: '2, rue du Commerce',
Country: 'France',
},
{
CustomerID: 'SUPRD',
ContactName: 'Pascale Cartrain',
CompanyName: 'Suprêmes délices',
Address: 'Boulevard Tirou, 255',
Country: 'Belgium',
},
{
CustomerID: 'CHOPS',
ContactName: 'Yang Wang',
CompanyName: 'Chop-suey Chinese',
Address: 'Hauptstr. 29',
Country: 'Switzerland',
},
{
CustomerID: 'RICSU',
ContactName: 'Michael Holz',
CompanyName: 'Richter Supermarkt',
Address: 'Grenzacherweg 237',
Country: 'Switzerland',
},
{
CustomerID: 'WELLI',
ContactName: 'Paula Parente',
CompanyName: 'Wellington Importadora',
Address: 'Rua do Mercado, 12',
Country: 'Brazil',
},
{
CustomerID: 'HILAA',
ContactName: 'Carlos Hernández',
CompanyName: 'HILARION-Abastos',
Address: 'Carrera 22 con Ave. Carlos Soublette #8-35',
Country: 'Venezuela',
},
{
CustomerID: 'ERNSH',
ContactName: 'Roland Mendel',
CompanyName: 'Ernst Handel',
Address: 'Kirchgasse 6',
Country: 'Austria',
},
{
CustomerID: 'CENTC',
ContactName: 'Francisco Chang',
CompanyName: 'Centro comercial Moctezuma',
Address: 'Sierras de Granada 9993',
Country: 'Mexico',
},
{
CustomerID: 'OTTIK',
ContactName: 'Henriette Pfalzheim',
CompanyName: 'Ottilies Käseladen',
Address: 'Mehrheimerstr. 369',
Country: 'Germany',
},
{
CustomerID: 'QUEDE',
ContactName: 'Bernardo Batista',
CompanyName: 'Que Delícia',
Address: 'Rua da Panificadora, 12',
Country: 'Brazil',
},
{
CustomerID: 'RATTC',
ContactName: 'Paula Wilson',
CompanyName: 'Rattlesnake Canyon Grocery',
Address: '2817 Milton Dr.',
Country: 'USA',
}
]Enable multiple foreign key columns
The Grid supports multiple foreign key columns with editing capabilities. This enables display of multiple columns from different foreign data sources simultaneously.
In the following example, “Customer Name” and “Ship City” are foreign key columns displaying the “ContactName” and “City” columns from their respective foreign data sources. This demonstrates that a single Grid row can display related information from multiple external data sources.
import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, Inject, Toolbar } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { orderDetails, employeeData, customerData } from './datasource';
function App() {
const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true };
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const validationRules = { required: true };
return <GridComponent dataSource={orderDetails} editSettings={editOptions} toolbar={toolbarOptions} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' isPrimaryKey={true} textAlign="Right"/>
<ColumnDirective field='CustomerID' foreignKeyValue='ContactName' foreignKeyField='CustomerID' dataSource={customerData} headerText='Customer Name' width='150' validationRules={validationRules}/>
<ColumnDirective field='Freight' headerText='Freight' width='120' editType='numericedit' textAlign="Right" format='C2'/>
<ColumnDirective field='EmployeeID' foreignKeyValue='City' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Ship City' width='140' validationRules={validationRules}/>
<ColumnDirective field='ShipCountry' headerText='Ship Country' editType='dropdownedit' width='150'/>
</ColumnsDirective>
<Inject services={[ForeignKey, Edit, Toolbar]}/>
</GridComponent>;
}
;
export default App;import { ColumnDirective, ColumnsDirective, ForeignKey, GridComponent } from '@syncfusion/ej2-react-grids';
import { Edit, EditSettingsModel, Inject, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { orderDetails, employeeData, customerData } from './datasource';
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const validationRules = { required: true };
return <GridComponent dataSource={orderDetails} editSettings={editOptions} toolbar={toolbarOptions} height={315}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' isPrimaryKey={true} textAlign="Right" />
<ColumnDirective field='CustomerID' foreignKeyValue='ContactName' foreignKeyField='CustomerID' dataSource={customerData} headerText='Customer Name' width='150' validationRules={validationRules} />
<ColumnDirective field='Freight' headerText='Freight' width='120' editType='numericedit' textAlign="Right" format='C2' />
<ColumnDirective field='EmployeeID' foreignKeyValue='City' foreignKeyField='EmployeeID' dataSource={employeeData} headerText='Ship City' width='140' validationRules={validationRules} />
<ColumnDirective field='ShipCountry' headerText='Ship Country' editType='dropdownedit' width='150' />
</ColumnsDirective>
<Inject services={[ForeignKey, Edit, Toolbar]} />
</GridComponent>
};
export default App;export let data = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}
];
export let employeeData = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode': 'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
var order = JSON.stringify([
{
'OrderID': 10248,
'CustomerID': 'VINET',
'CustomerName': 'Maria ',
'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',
'EmployeeID': 3
},
{
'OrderID': 10249,
'CustomerID': 'TOMSP',
'CustomerName': 'Ana Trujillo',
'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',
'EmployeeID': 5
},
{
'OrderID': 10250,
'CustomerID': 'HANAR',
'CustomerName': 'Antonio Moreno',
'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',
'EmployeeID': 1
},
{
'OrderID': 10251,
'CustomerID': 'VICTE',
'CustomerName': 'Thomas Hardy',
'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',
'EmployeeID': 6
},
{
'OrderID': 10252,
'CustomerID': 'SUPRD',
'CustomerName': 'Christina Berglund',
'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',
'EmployeeID': 2
},
{
'OrderID': 10253,
'CustomerID': 'HANAR',
'CustomerName': 'Hanna Moos',
'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',
'EmployeeID': 4
},
{
'OrderID': 10254,
'CustomerID': 'CHOPS',
'CustomerName': 'Frédérique Citeaux',
'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',
'EmployeeID': 9
},
{
'OrderID': 10255,
'CustomerID': 'RICSU',
'CustomerName': 'Martín Sommer',
'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',
'EmployeeID': 7
},
{
'OrderID': 10256,
'CustomerID': 'WELLI',
'CustomerName': 'Laurence Lebihan',
'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',
'EmployeeID': 8
},
{
'OrderID': 10257,
'CustomerID': 'HILAA',
'CustomerName': 'Elizabeth Lincoln',
'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',
'EmployeeID': 5
},
{
'OrderID': 10258,
'CustomerID': 'ERNSH',
'CustomerName': 'Victoria Ashworth',
'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',
'EmployeeID': 1
},
{
'OrderID': 10259,
'CustomerID': 'CENTC',
'CustomerName': 'Patricio Simpson',
'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',
'EmployeeID': 6
},
{
'OrderID': 10260,
'CustomerID': 'OTTIK',
'CustomerName': 'Francisco Chang',
'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',
'EmployeeID': 2
},
{
'OrderID': 10261,
'CustomerID': 'QUEDE',
'CustomerName': 'Yang Wang',
'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',
'EmployeeID': 7
},
{
'OrderID': 10262,
'CustomerID': 'RATTC',
'CustomerName': 'Pedro Afonso',
'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',
'EmployeeID': 4
},
{
'OrderID': 10263,
'CustomerID': 'ERNSH',
'CustomerName': 'Elizabeth Brown',
'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,
'ShipCountry': 'Austria',
'EmployeeID': 3
},
{
'OrderID': 10264,
'CustomerID': 'FOLKO',
'CustomerName': 'Sven Ottlieb',
'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',
'EmployeeID': 8
},
{
'OrderID': 10265,
'CustomerID': 'BLONP',
'CustomerName': 'Ann Devon',
'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',
'EmployeeID': 3
},
{
'OrderID': 10266,
'CustomerID': 'WARTH',
'CustomerName': 'Roland Mendel',
'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',
'EmployeeID': 2
},
{
'OrderID': 10267,
'CustomerID': 'FRANK',
'CustomerName': 'Aria Cruz',
'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',
'EmployeeID': 4
},
{
'OrderID': 10268,
'CustomerID': 'GROSR',
'CustomerName': 'Diego Roel',
'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',
'EmployeeID': 2
},
{
'OrderID': 10269,
'CustomerID': 'WHITC',
'CustomerName': 'Martine Rancé',
'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',
'EmployeeID': 1
},
{
'OrderID': 10270,
'CustomerID': 'WARTH',
'CustomerName': 'Maria Larsson',
'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',
'EmployeeID': 4
},
{
'OrderID': 10271,
'CustomerID': 'SPLIR',
'CustomerName': 'Peter Franken',
'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',
'EmployeeID': 5
},
{
'OrderID': 10272,
'CustomerID': 'RATTC',
'CustomerName': 'Carine Schmitt',
'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',
'EmployeeID': 3
},
{
'OrderID': 10273,
'CustomerID': 'QUICK',
'CustomerName': 'Paolo Accorti',
'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',
'EmployeeID': 6
},
{
'OrderID': 10274,
'CustomerID': 'VINET',
'CustomerName': 'Lino Rodriguez',
'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',
'EmployeeID': 1
},
{
'OrderID': 10275,
'CustomerID': 'MAGAA',
'CustomerName': 'Eduardo Saavedra',
'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',
'EmployeeID': 3
},
{
'OrderID': 10276,
'CustomerID': 'TORTU',
'CustomerName': 'José Pedro Freyre',
'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',
'EmployeeID': 5
},
{
'OrderID': 10277,
'CustomerID': 'MORGK',
'CustomerName': 'André Fonseca',
'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',
'EmployeeID': 7
},
{
'OrderID': 10278,
'CustomerID': 'BERGS',
'CustomerName': 'Howard Snyder',
'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',
'EmployeeID': 9
},
{
'OrderID': 10279,
'CustomerID': 'LEHMS',
'CustomerName': 'Manuel Pereira',
'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',
'EmployeeID': 2
},
{
'OrderID': 10280,
'CustomerID': 'BERGS',
'CustomerName': 'Mario Pontes',
'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',
'EmployeeID': 4
},
{
'OrderID': 10281,
'CustomerID': 'ROMEY',
'CustomerName': 'Carlos Hernández',
'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',
'EmployeeID': 6
},
{
'OrderID': 10282,
'CustomerID': 'ROMEY',
'CustomerName': 'Yoshi Latimer',
'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',
'EmployeeID': 8
},
{
'OrderID': 10283,
'CustomerID': 'LILAS',
'CustomerName': 'Patricia McKenna',
'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',
'EmployeeID': 9
},
{
'OrderID': 10284,
'CustomerID': 'LEHMS',
'CustomerName': 'Helen Bennett',
'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',
'EmployeeID': 6
},
{
'OrderID': 10285,
'CustomerID': 'QUICK',
'CustomerName': 'Philip Cramer',
'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',
'EmployeeID': 3
},
{
'OrderID': 10286,
'CustomerID': 'QUICK',
'CustomerName': 'Daniel Tonini',
'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',
'EmployeeID': 1
},
{
'OrderID': 10287,
'CustomerID': 'RICAR',
'CustomerName': 'Annette Roulet',
'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',
'EmployeeID': 8
},
{
'OrderID': 10288,
'CustomerID': 'REGGC',
'CustomerName': 'Yoshi Tannamuri',
'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',
'EmployeeID': 4
},
{
'OrderID': 10289,
'CustomerID': 'BSBEV',
'CustomerName': 'John Steel',
'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',
'EmployeeID': 2
},
{
'OrderID': 10290,
'CustomerID': 'COMMI',
'CustomerNames': 'Renate Messner',
'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',
'EmployeeID': 5
},
{
'OrderID': 10291,
'CustomerID': 'QUEDE',
'CustomerName': 'Jaime Yorres',
'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',
'EmployeeID': 7
},
{
'OrderID': 10292,
'CustomerID': 'TRADH',
'CustomerName': 'Carlos González',
'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',
'EmployeeID': 3
},
{
'OrderID': 10293,
'CustomerID': 'TORTU',
'CustomerName': 'Felipe Izquierdo',
'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',
'EmployeeID': 1
},
{
'OrderID': 10294,
'CustomerID': 'RATTC',
'CustomerName': 'Fran Wilson',
'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',
'EmployeeID': 2
},
{
'OrderID': 10295,
'CustomerID': 'VINET',
'CustomerName': 'Giovanni Rovelli',
'OrderDate': '1996-09-02T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 1.15,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France',
'EmployeeID': 3
},
{
'OrderID': 10296,
'CustomerID': 'LILAS',
'CustomerName': 'Catherine Dewey',
'OrderDate': '1996-09-03T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 0.12,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela',
'EmployeeID': 4
},
{
'OrderID': 10297,
'CustomerID': 'BLONP',
'CustomerName': 'Jean Fresnière',
'OrderDate': '1996-09-04T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 5.74,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France',
'EmployeeID': 5
},
{
'OrderID': 10298,
'CustomerID': 'HUNGO',
'CustomerName': 'Alexander Feuer',
'OrderDate': '1996-09-05T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 168.22,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland',
'EmployeeID': 6
},
{
'OrderID': 10299,
'CustomerID': 'RICAR',
'CustomerName': 'Simon Crowther',
'OrderDate': '1996-09-06T00:00:00.000Z',
'ShippedDate': '1996-09-13T00:00:00.000Z',
'Freight': 29.76,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil',
'EmployeeID': 7
},
{
'OrderID': 10300,
'CustomerID': 'MAGAA',
'CustomerNames': 'Yvonne Moncada',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 17.68,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy',
'EmployeeID': 8
},
{
'OrderID': 10301,
'CustomerID': 'WANDK',
'CustomerName': 'Rene Phillips',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 45.08,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany',
'EmployeeID': 9
},
{
'OrderID': 10302,
'CustomerID': 'SUPRD',
'CustomerName': 'Pirkko Koskitalo',
'OrderDate': '1996-09-10T00:00:00.000Z',
'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 6.27,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium',
'EmployeeID': 2
},
{
'OrderID': 10303,
'CustomerID': 'GODOS',
'CustomerName': 'Paula Parente',
'OrderDate': '1996-09-11T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 107.83,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain',
'EmployeeID': 4
},
{
'OrderID': 10304,
'CustomerID': 'TORTU',
'CustomerName': 'Karl Jablonski',
'OrderDate': '1996-09-12T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 63.79,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico',
'EmployeeID': 8
},
{
'OrderID': 10305,
'CustomerID': 'OLDWO',
'CustomerName': 'Matti Karttunen',
'OrderDate': '1996-09-13T00:00:00.000Z',
'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 257.62,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA',
'EmployeeID': 6
},
{
'OrderID': 10306,
'CustomerID': 'ROMEY',
'CustomerName': 'Zbyszek Piestrzeniewicz',
'OrderDate': '1996-09-16T00:00:00.000Z',
'ShippedDate': '1996-09-23T00:00:00.000Z',
'Freight': 7.56,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain',
'EmployeeID': 3
},
{
'OrderID': 10307,
'CustomerID': 'LONEP',
'CustomerName': 'Zbyszek Piestrzeniewicz',
'OrderDate': '1996-09-17T00:00:00.000Z',
'ShippedDate': '1996-09-25T00:00:00.000Z',
'Freight': 0.56,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA',
'EmployeeID': 1
}
]);
export let orderDetails = JSON.parse(order, function (field, value) {
var dupValue = value;
if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
var arr = dupValue.split(/[^0-9]/);
value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10));
}
return value;
});
export let customerData = [
{
'CustomerID': 'ALFKI',
'ContactName': 'Maria ',
'CompanyName': 'Alfreds Futterkiste',
'Address': 'Obere Str. 57',
'Country': 'Germany'
},
{
'CustomerID': 'ANATR',
'ContactName': 'Ana Trujillo',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'Address': 'Avda. de la Constitución 2222',
'Country': 'Mexico'
},
{
'CustomerID': 'ANTON',
'ContactName': 'Antonio Moreno',
'CompanyName': 'Antonio Moreno Taquería',
'Address': 'Mataderos 2312',
'Country': 'Mexico'
},
{
'CustomerID': 'AROUT',
'ContactName': 'Thomas Hardy',
'CompanyName': 'Around the Horn',
'Address': '120 Hanover Sq.',
'Country': 'UK'
},
{
'CustomerID': 'BERGS',
'ContactName': 'Christina Berglund',
'CompanyName': 'Berglunds snabbköp',
'Address': 'Berguvsvägen 8',
'Country': 'Sweden'
},
{
'CustomerID': 'BLAUS',
'ContactName': 'Hanna Moos',
'CompanyName': 'Blauer See Delikatessen',
'Address': 'Forsterstr. 57',
'Country': 'Germany'
},
{
'CustomerID': 'BLONP',
'ContactName': 'Frédérique Citeaux',
'CompanyName': 'Blondesddsl père et fils',
'Address': '24, place Kléber',
'Country': 'France'
},
{
'CustomerID': 'BOLID',
'ContactName': 'Martín Sommer',
'CompanyName': 'Bólido Comidas preparadas',
'Address': 'C/ Araquil, 67',
'Country': 'Spain'
},
{
'CustomerID': 'BONAP',
'ContactName': 'Laurence Lebihan',
'CompanyName': 'Bon app',
'Address': '12, rue des Bouchers',
'Country': 'France'
},
{
'CustomerID': 'BOTTM',
'ContactName': 'Elizabeth Lincoln',
'CompanyName': 'Bottom-Dollar Markets',
'Address': '23 Tsawassen Blvd.',
'Country': 'Canada'
},
{
'CustomerID': 'BSBEV',
'ContactName': 'Victoria Ashworth',
'CompanyName': 'B\'s Beverages',
'Address': 'Fauntleroy Circus',
'Country': 'UK'
},
{
'CustomerID': 'CACTU',
'ContactName': 'Patricio Simpson',
'CompanyName': 'Cactus Comidas para llevar',
'Address': 'Cerrito 333',
'Country': 'Argentina'
},
{
'CustomerID': 'CENTC',
'ContactName': 'Francisco Chang',
'CompanyName': 'Centro comercial Moctezuma',
'Address': 'Sierras de Granada 9993',
'Country': 'Mexico'
},
{
'CustomerID': 'CHOPS',
'ContactName': 'Yang Wang',
'CompanyName': 'Chop-suey Chinese',
'Address': 'Hauptstr. 29',
'Country': 'Switzerland'
},
{
'CustomerID': 'COMMI',
'ContactName': 'Pedro Afonso',
'CompanyName': 'Comércio Mineiro',
'Address': 'Av. dos Lusíadas, 23',
'Country': 'Brazil'
},
{
'CustomerID': 'CONSH',
'ContactName': 'Elizabeth Brown',
'CompanyName': 'Consolidated Holdings',
'Address': 'Berkeley Gardens 12 Brewery',
'Country': 'UK'
},
{
'CustomerID': 'DRACD',
'ContactName': 'Sven Ottlieb',
'CompanyName': 'Drachenblut Delikatessen',
'Address': 'Walserweg 21',
'Country': 'Germany'
},
{
'CustomerID': 'DUMON',
'ContactName': 'Janine Labrune',
'CompanyName': 'Du monde entier',
'Address': '67, rue des Cinquante Otages',
'Country': 'France'
},
{
'CustomerID': 'EASTC',
'ContactName': 'Ann Devon',
'CompanyName': 'Eastern Connection',
'Address': '35 King George',
'Country': 'UK'
},
{
'CustomerID': 'ERNSH',
'ContactName': 'Roland Mendel',
'CompanyName': 'Ernst Handel',
'Address': 'Kirchgasse 6',
'Country': 'Austria'
},
{
'CustomerID': 'FAMIA',
'ContactName': 'Aria Cruz',
'CompanyName': 'Familia Arquibaldo',
'Address': 'Rua Orós, 92',
'Country': 'Brazil'
},
{
'CustomerID': 'FISSA',
'ContactName': 'Diego Roel',
'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.',
'Address': 'C/ Moralzarzal, 86',
'Country': 'Spain'
},
{
'CustomerID': 'FOLIG',
'ContactName': 'Martine Rancé',
'CompanyName': 'Folies gourmandes',
'Address': '184, chaussée de Tournai',
'Country': 'France'
},
{
'CustomerID': 'FOLKO',
'ContactName': 'Maria Larsson',
'CompanyName': 'Folk och fä HB',
'Address': 'Åkergatan 24',
'Country': 'Sweden'
},
{
'CustomerID': 'FRANK',
'ContactName': 'Peter Franken',
'CompanyName': 'Frankenversand',
'Address': 'Berliner Platz 43',
'Country': 'Germany'
},
{
'CustomerID': 'FRANR',
'ContactName': 'Carine Schmitt',
'CompanyName': 'France restauration',
'Address': '54, rue Royale',
'Country': 'France'
},
{
'CustomerID': 'FRANS',
'ContactName': 'Paolo Accorti',
'CompanyName': 'Franchi S.p.A.',
'Address': 'Via Monte Bianco 34',
'Country': 'Italy'
},
{
'CustomerID': 'FURIB',
'ContactName': 'Lino Rodriguez',
'CompanyName': 'Furia Bacalhau e Frutos do Mar',
'Address': 'Jardim das rosas n. 32',
'Country': 'Portugal'
},
{
'CustomerID': 'GALED',
'ContactName': 'Eduardo Saavedra',
'CompanyName': 'Galería del gastrónomo',
'Address': 'Rambla de Cataluña, 23',
'Country': 'Spain'
},
{
'CustomerID': 'GODOS',
'ContactName': 'José Pedro Freyre',
'CompanyName': 'Godos Cocina Típica',
'Address': 'C/ Romero, 33',
'Country': 'Spain'
},
{
'CustomerID': 'GOURL',
'ContactName': 'André Fonseca',
'CompanyName': 'Gourmet Lanchonetes',
'Address': 'Av. Brasil, 442',
'Country': 'Brazil'
},
{
'CustomerID': 'GREAL',
'ContactName': 'Howard Snyder',
'CompanyName': 'Great Lakes Food Market',
'Address': '2732 Baker Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'GROSR',
'ContactName': 'Manuel Pereira',
'CompanyName': 'GROSELLA-Restaurante',
'Address': '5ª Ave. Los Palos Grandes',
'Country': 'Venezuela'
},
{
'CustomerID': 'HANAR',
'ContactName': 'Mario Pontes',
'CompanyName': 'Hanari Carnes',
'Address': 'Rua do Paço, 67',
'Country': 'Brazil'
},
{
'CustomerID': 'HILAA',
'ContactName': 'Carlos Hernández',
'CompanyName': 'HILARION-Abastos',
'Address': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'Country': 'Venezuela'
},
{
'CustomerID': 'HUNGC',
'ContactName': 'Yoshi Latimer',
'CompanyName': 'Hungry Coyote Import Store',
'Address': 'City Center Plaza 516 Main St.',
'Country': 'USA'
},
{
'CustomerID': 'HUNGO',
'ContactName': 'Patricia McKenna',
'CompanyName': 'Hungry Owl All-Night Grocers',
'Address': '8 Johnstown Road',
'Country': 'Ireland'
},
{
'CustomerID': 'ISLAT',
'ContactName': 'Helen Bennett',
'CompanyName': 'Island Trading',
'Address': 'Garden House Crowther Way',
'Country': 'UK'
},
{
'CustomerID': 'KOENE',
'ContactName': 'Philip Cramer',
'CompanyName': 'Königlich Essen',
'Address': 'Maubelstr. 90',
'Country': 'Germany'
},
{
'CustomerID': 'LACOR',
'ContactName': 'Daniel Tonini',
'CompanyName': 'La corne d\'abondance',
'Address': '67, avenue de l\'Europe',
'Country': 'France'
},
{
'CustomerID': 'LAMAI',
'ContactName': 'Annette Roulet',
'CompanyName': 'La maison d\'Asie',
'Address': '1 rue Alsace-Lorraine',
'Country': 'France'
},
{
'CustomerID': 'LAUGB',
'ContactName': 'Yoshi Tannamuri',
'CompanyName': 'Laughing Bacchus Wine Cellars',
'Address': '1900 Oak St.',
'Country': 'Canada'
},
{
'CustomerID': 'LAZYK',
'ContactName': 'John Steel',
'CompanyName': 'Lazy K Kountry Store',
'Address': '12 Orchestra Terrace',
'Country': 'USA'
},
{
'CustomerID': 'LEHMS',
'ContactName': 'Renate Messner',
'CompanyName': 'Lehmanns Marktstand',
'Address': 'Magazinweg 7',
'Country': 'Germany'
},
{
'CustomerID': 'LETSS',
'ContactName': 'Jaime Yorres',
'CompanyName': 'Let\'s Stop N Shop',
'Address': '87 Polk St. Suite 5',
'Country': 'USA'
},
{
'CustomerID': 'LILAS',
'ContactName': 'Carlos González',
'CompanyName': 'LILA-Supermercado',
'Address': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'Country': 'Venezuela'
},
{
'CustomerID': 'LINOD',
'ContactName': 'Felipe Izquierdo',
'CompanyName': 'LINO-Delicateses',
'Address': 'Ave. 5 de Mayo Porlamar',
'Country': 'Venezuela'
},
{
'CustomerID': 'LONEP',
'ContactName': 'Fran Wilson',
'CompanyName': 'Lonesome Pine Restaurant',
'Address': '89 Chiaroscuro Rd.',
'Country': 'USA'
},
{
'CustomerID': 'MAGAA',
'ContactName': 'Giovanni Rovelli',
'CompanyName': 'Magazzini Alimentari Riuniti',
'Address': 'Via Ludovico il Moro 22',
'Country': 'Italy'
},
{
'CustomerID': 'MAISD',
'ContactName': 'Catherine Dewey',
'CompanyName': 'Maison Dewey',
'Address': 'Rue Joseph-Bens 532',
'Country': 'Belgium'
},
{
'CustomerID': 'MEREP',
'ContactName': 'Jean Fresnière',
'CompanyName': 'Mère Paillarde',
'Address': '43 rue St. Laurent',
'Country': 'Canada'
},
{
'CustomerID': 'MORGK',
'ContactName': 'Alexander Feuer',
'CompanyName': 'Morgenstern Gesundkost',
'Address': 'Heerstr. 22',
'Country': 'Germany'
},
{
'CustomerID': 'NORTS',
'ContactName': 'Simon Crowther',
'CompanyName': 'North/South',
'Address': 'South House 300 Queensbridge',
'Country': 'UK'
},
{
'CustomerID': 'OCEAN',
'ContactName': 'Yvonne Moncada',
'CompanyName': 'Océano Atlántico Ltda.',
'Address': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'Country': 'Argentina'
},
{
'CustomerID': 'OLDWO',
'ContactName': 'Rene Phillips',
'CompanyName': 'Old World Delicatessen',
'Address': '2743 Bering St.',
'Country': 'USA'
},
{
'CustomerID': 'OTTIK',
'ContactName': 'Henriette Pfalzheim',
'CompanyName': 'Ottilies Käseladen',
'Address': 'Mehrheimerstr. 369',
'Country': 'Germany'
},
{
'CustomerID': 'PARIS',
'ContactName': 'Marie Bertrand',
'CompanyName': 'Paris spécialités',
'Address': '265, boulevard Charonne',
'Country': 'France'
},
{
'CustomerID': 'PERIC',
'ContactName': 'Guillermo Fernández',
'CompanyName': 'Pericles Comidas clásicas',
'Address': 'Calle Dr. Jorge Cash 321',
'Country': 'Mexico'
},
{
'CustomerID': 'PICCO',
'ContactName': 'Georg Pipps',
'CompanyName': 'Piccolo und mehr',
'Address': 'Geislweg 14',
'Country': 'Austria'
},
{
'CustomerID': 'PRINI',
'ContactName': 'Isabel de Castro',
'CompanyName': 'Princesa Isabel Vinhos',
'Address': 'Estrada da saúde n. 58',
'Country': 'Portugal'
},
{
'CustomerID': 'QUEDE',
'ContactName': 'Bernardo Batista',
'CompanyName': 'Que Delícia',
'Address': 'Rua da Panificadora, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'QUEEN',
'ContactName': 'Lúcia Carvalho',
'CompanyName': 'Queen Cozinha',
'Address': 'Alameda dos Canàrios, 891',
'Country': 'Brazil'
},
{
'CustomerID': 'QUICK',
'ContactName': 'Horst Kloss',
'CompanyName': 'QUICK-Stop',
'Address': 'Taucherstraße 10',
'Country': 'Germany'
},
{
'CustomerID': 'RANCH',
'ContactName': 'Sergio Gutiérrez',
'CompanyName': 'Rancho grande',
'Address': 'Av. del Libertador 900',
'Country': 'Argentina'
},
{
'CustomerID': 'RATTC',
'ContactName': 'Paula Wilson',
'CompanyName': 'Rattlesnake Canyon Grocery',
'Address': '2817 Milton Dr.',
'Country': 'USA'
},
{
'CustomerID': 'REGGC',
'ContactName': 'Maurizio Moroni',
'CompanyName': 'Reggiani Caseifici',
'Address': 'Strada Provinciale 124',
'Country': 'Italy'
},
{
'CustomerID': 'RICAR',
'ContactName': 'Janete Limeira',
'CompanyName': 'Ricardo Adocicados',
'Address': 'Av. Copacabana, 267',
'Country': 'Brazil'
},
{
'CustomerID': 'RICSU',
'ContactName': 'Michael Holz',
'CompanyName': 'Richter Supermarkt',
'Address': 'Grenzacherweg 237',
'Country': 'Switzerland'
},
{
'CustomerID': 'ROMEY',
'ContactName': 'Alejandra Camino',
'CompanyName': 'Romero y tomillo',
'Address': 'Gran Vía, 1',
'Country': 'Spain'
},
{
'CustomerID': 'SANTG',
'ContactName': 'Jonas Bergulfsen',
'CompanyName': 'Santé Gourmet',
'Address': 'Erling Skakkes gate 78',
'Country': 'Norway'
},
{
'CustomerID': 'SAVEA',
'ContactName': 'Jose Pavarotti',
'CompanyName': 'Save-a-lot Markets',
'Address': '187 Suffolk Ln.',
'Country': 'USA'
},
{
'CustomerID': 'SEVES',
'ContactName': 'Hari Kumar',
'CompanyName': 'Seven Seas Imports',
'Address': '90 Wadhurst Rd.',
'Country': 'UK'
},
{
'CustomerID': 'SIMOB',
'ContactName': 'Jytte Petersen',
'CompanyName': 'Simons bistro',
'Address': 'Vinbæltet 34',
'Country': 'Denmark'
},
{
'CustomerID': 'SPECD',
'ContactName': 'Dominique Perrier',
'CompanyName': 'Spécialités du monde',
'Address': '25, rue Lauriston',
'Country': 'France'
},
{
'CustomerID': 'SPLIR',
'ContactName': 'Art Braunschweiger',
'CompanyName': 'Split Rail Beer & Ale',
'Address': 'P.O. Box 555',
'Country': 'USA'
},
{
'CustomerID': 'SUPRD',
'ContactName': 'Pascale Cartrain',
'CompanyName': 'Suprêmes délices',
'Address': 'Boulevard Tirou, 255',
'Country': 'Belgium'
},
{
'CustomerID': 'THEBI',
'ContactName': 'Liz Nixon',
'CompanyName': 'The Big Cheese',
'Address': '89 Jefferson Way Suite 2',
'Country': 'USA'
},
{
'CustomerID': 'THECR',
'ContactName': 'Liu Wong',
'CompanyName': 'The Cracker Box',
'Address': '55 Grizzly Peak Rd.',
'Country': 'USA'
},
{
'CustomerID': 'TOMSP',
'ContactName': 'Karin Josephs',
'CompanyName': 'Toms Spezialitäten',
'Address': 'Luisenstr. 48',
'Country': 'Germany'
},
{
'CustomerID': 'TORTU',
'ContactName': 'Miguel Angel Paolino',
'CompanyName': 'Tortuga Restaurante',
'Address': 'Avda. Azteca 123',
'Country': 'Mexico'
},
{
'CustomerID': 'TRADH',
'ContactName': 'Anabela Domingues',
'CompanyName': 'Tradição Hipermercados',
'Address': 'Av. Inês de Castro, 414',
'Country': 'Brazil'
},
{
'CustomerID': 'TRAIH',
'ContactName': 'Helvetius Nagy',
'CompanyName': 'Trail\'s Head Gourmet Provisioners',
'Address': '722 DaVinci Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'VAFFE',
'ContactName': 'Palle Ibsen',
'CompanyName': 'Vaffeljernet',
'Address': 'Smagsloget 45',
'Country': 'Denmark'
},
{
'CustomerID': 'VICTE',
'ContactName': 'Mary Saveley',
'CompanyName': 'Victuailles en stock',
'Address': '2, rue du Commerce',
'Country': 'France'
},
{
'CustomerID': 'VINET',
'ContactName': 'Paul Henriot',
'CompanyName': 'Vins et alcools Chevalier',
'Address': '59 rue de l\'Abbaye',
'Country': 'France'
},
{
'CustomerID': 'WANDK',
'ContactName': 'Rita Müller',
'CompanyName': 'Die Wandernde Kuh',
'Address': 'Adenauerallee 900',
'Country': 'Germany'
},
{
'CustomerID': 'WARTH',
'ContactName': 'Pirkko Koskitalo',
'CompanyName': 'Wartian Herkku',
'Address': 'Torikatu 38',
'Country': 'Finland'
},
{
'CustomerID': 'WELLI',
'ContactName': 'Paula Parente',
'CompanyName': 'Wellington Importadora',
'Address': 'Rua do Mercado, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'WHITC',
'ContactName': 'Karl Jablonski',
'CompanyName': 'White Clover Markets',
'Address': '305 - 14th Ave. S. Suite 3B',
'Country': 'USA'
},
{
'CustomerID': 'WILMK',
'ContactName': 'Matti Karttunen',
'CompanyName': 'Wilman Kala',
'Address': 'Keskuskatu 45',
'Country': 'Finland'
},
{
'CustomerID': 'WOLZA',
'ContactName': 'Zbyszek Piestrzeniewicz',
'CompanyName': 'Wolski Zajazd',
'Address': 'ul. Filtrowa 68',
'Country': 'Poland'
}
];export let data: Object[] = [
{
OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5),
ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye',
ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0,
Employee: {
EmployeeID: 1
},
},
{
OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6),
ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48',
ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1,
Employee: {
'EmployeeID': 2
},
},
{
OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, OrderDate: new Date(8367642e5),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 65.83, Verified: !0,
Employee: {
EmployeeID: 3
},
},
{
OrderID: 10251, CustomerID: 'VICTE', EmployeeID: 3, OrderDate: new Date(8367642e5),
ShipName: 'Victuailles en stock', ShipCity: 'Lyon', ShipAddress: '2, rue du Commerce',
ShipRegion: 'CJ', ShipPostalCode: '69004', ShipCountry: 'France', Freight: 41.34, Verified: !0,
Employee: {
EmployeeID: 4
},
},
{
OrderID: 10252, CustomerID: 'SUPRD', EmployeeID: 4, OrderDate: new Date(8368506e5),
ShipName: 'Suprêmes délices', ShipCity: 'Charleroi', ShipAddress: 'Boulevard Tirou, 255',
ShipRegion: 'CJ', ShipPostalCode: 'B-6000', ShipCountry: 'Belgium', Freight: 51.3, Verified: !0,
Employee: {
EmployeeID: 5
}
},
{
OrderID: 10253, CustomerID: 'HANAR', EmployeeID: 3, OrderDate: new Date(836937e6),
ShipName: 'Hanari Carnes', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua do Paço, 67',
ShipRegion: 'RJ', ShipPostalCode: '05454-876', ShipCountry: 'Brazil', Freight: 58.17, Verified: !0
},
{
OrderID: 10254, CustomerID: 'CHOPS', EmployeeID: 5, OrderDate: new Date(8370234e5),
ShipName: 'Chop-suey Chinese', ShipCity: 'Bern', ShipAddress: 'Hauptstr. 31',
ShipRegion: 'CJ', ShipPostalCode: '3012', ShipCountry: 'Switzerland', Freight: 22.98, Verified: !1
},
{
OrderID: 10255, CustomerID: 'RICSU', EmployeeID: 9, OrderDate: new Date(8371098e5),
ShipName: 'Richter Supermarkt', ShipCity: 'Genève', ShipAddress: 'Starenweg 5',
ShipRegion: 'CJ', ShipPostalCode: '1204', ShipCountry: 'Switzerland', Freight: 148.33, Verified: !0
},
{
OrderID: 10256, CustomerID: 'WELLI', EmployeeID: 3, OrderDate: new Date(837369e6),
ShipName: 'Wellington Importadora', ShipCity: 'Resende', ShipAddress: 'Rua do Mercado, 12',
ShipRegion: 'SP', ShipPostalCode: '08737-363', ShipCountry: 'Brazil', Freight: 13.97, Verified: !1
},
{
OrderID: 10257, CustomerID: 'HILAA', EmployeeID: 4, OrderDate: new Date(8374554e5),
ShipName: 'HILARION-Abastos', ShipCity: 'San Cristóbal', ShipAddress: 'Carrera 22 con Ave. Carlos Soublette #8-35',
ShipRegion: 'Táchira', ShipPostalCode: '5022', ShipCountry: 'Venezuela', Freight: 81.91, Verified: !0
},
{
OrderID: 10258, CustomerID: 'ERNSH', EmployeeID: 1, OrderDate: new Date(8375418e5),
ShipName: 'Ernst Handel', ShipCity: 'Graz', ShipAddress: 'Kirchgasse 6',
ShipRegion: 'CJ', ShipPostalCode: '8010', ShipCountry: 'Austria', Freight: 140.51, Verified: !0
},
{
OrderID: 10259, CustomerID: 'CENTC', EmployeeID: 4, OrderDate: new Date(8376282e5),
ShipName: 'Centro comercial Moctezuma', ShipCity: 'México D.F.', ShipAddress: 'Sierras de Granada 9993',
ShipRegion: 'CJ', ShipPostalCode: '05022', ShipCountry: 'Mexico', Freight: 3.25, Verified: !1
},
{
OrderID: 10260, CustomerID: 'OTTIK', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Ottilies Käseladen', ShipCity: 'Köln', ShipAddress: 'Mehrheimerstr. 369',
ShipRegion: 'CJ', ShipPostalCode: '50739', ShipCountry: 'Germany', Freight: 55.09, Verified: !0
},
{
OrderID: 10261, CustomerID: 'QUEDE', EmployeeID: 4, OrderDate: new Date(8377146e5),
ShipName: 'Que Delícia', ShipCity: 'Rio de Janeiro', ShipAddress: 'Rua da Panificadora, 12',
ShipRegion: 'RJ', ShipPostalCode: '02389-673', ShipCountry: 'Brazil', Freight: 3.05, Verified: !1
},
{
OrderID: 10262, CustomerID: 'RATTC', EmployeeID: 8, OrderDate: new Date(8379738e5),
ShipName: 'Rattlesnake Canyon Grocery', ShipCity: 'Albuquerque', ShipAddress: '2817 Milton Dr.',
ShipRegion: 'NM', ShipPostalCode: '87110', ShipCountry: 'USA', Freight: 48.29, Verified: !0
}];
export let employeeData: Object[] = [{
'EmployeeID': 1,
'LastName': 'Davolio',
'FirstName': 'Nancy',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-664743600000),
'HireDate': new Date(704692800000),
'Address': '507 - 20th Ave. E.\r\nApt. 2A',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98122',
'Country': 'USA',
'HomePhone': '(206) 555-9857',
'Extension': '5467',
'Photo': { 'Length': 21626 },
'Notes': 'Education includes a BA in psychology from Colorado State University in 1970. She also completed\
\'The Art of the Cold Call.\' Nancy is a member of Toastmasters International.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 2,
'LastName': 'Fuller',
'FirstName': 'Andrew',
'Title': 'Vice President, Sales',
'TitleOfCourtesy': 'Dr.',
'BirthDate': new Date(-563828400000),
'HireDate': new Date(713764800000),
'Address': '908 W. Capital Way',
'City': 'Tacoma',
'Region': 'WA',
'PostalCode': '98401',
'Country': 'USA',
'HomePhone': '(206) 555-9482',
'Extension': '3457',
'Photo': { 'Length': 21626 },
'Notes': 'Andrew received his BTS commercial in 1974 and a Ph.D. in international marketing from the University of \
Dallas in 1981. He is fluent in French and Italian and reads German. He joined the company as a sales representative, \
was promoted to sales manager in January 1992 and to vice president of sales in March 1993. Andrew is a member of the \
Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.',
'ReportsTo': 0,
'PhotoPath': 'http://accweb/emmployees/fuller.bmp'
},
{
'EmployeeID': 3,
'LastName': 'Leverling',
'FirstName': 'Janet',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-200088000000),
'HireDate': new Date(702104400000),
'Address': '722 Moss Bay Blvd.',
'City': 'Kirkland',
'Region': 'WA',
'PostalCode': '98033',
'Country': 'USA',
'HomePhone': '(206) 555-3412',
'Extension': '3355',
'Photo': { 'Length': 21722 },
'Notes': 'Janet has a BS degree in chemistry from Boston College (1984). \
She has also completed a certificate program in food retailing management.\
Janet was hired as a sales associate in 1991 and promoted to sales representative in February 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/leverling.bmp'
},
{
'EmployeeID': 4,
'LastName': 'Peacock',
'FirstName': 'Margaret',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mrs.',
'BirthDate': new Date(-1018814400000),
'HireDate': new Date(736401600000),
'Address': '4110 Old Redmond Rd.',
'City': 'Redmond',
'Region': 'WA',
'PostalCode': '98052',
'Country': 'USA',
'HomePhone': '(206) 555-8122',
'Extension': '5176',
'Photo': { 'Length': 21626 },
'Notes': 'Margaret holds a BA in English literature from Concordia College (1958) and an MA from the American \
Institute of Culinary Arts (1966). She was assigned to the London office temporarily from July through November 1992.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/peacock.bmp'
},
{
'EmployeeID': 5,
'LastName': 'Buchanan',
'FirstName': 'Steven',
'Title': 'Sales Manager',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-468010800000),
'HireDate': new Date(750830400000),
'Address': '14 Garrett Hill',
'City': 'London',
'Region': null,
'PostalCode':
'SW1 8JR',
'Country': 'UK',
'HomePhone': '(71) 555-4848',
'Extension': '3453',
'Photo': { 'Length': 21626 },
'Notes': 'Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1976. Upon joining the company as \
a sales representative in 1992, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent \
post in London. He was promoted to sales manager in March 1993. Mr. Buchanan has completed the courses \'Successful \
Telemarketing\' and \'International Sales Management.\' He is fluent in French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/buchanan.bmp'
},
{
'EmployeeID': 6,
'LastName': 'Suyama',
'FirstName': 'Michael',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-205185600000),
'HireDate': new Date(750830400000),
'Address': 'Coventry House\r\nMiner Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'EC2 7JR',
'Country': 'UK',
'HomePhone': '(71) 555-7773',
'Extension': '428',
'Photo': { 'Length': 21626 },
'Notes': 'Michael is a graduate of Sussex University (MA, economics, 1983) and the University of California at Los Angeles \
(MBA, marketing, 1986). He has also taken the courses \'Multi-Cultural Selling\' and \'Time Management for the Sales Professional.\' \
He is fluent in Japanese and can read and write French, Portuguese, and Spanish.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 7,
'LastName': 'King',
'FirstName': 'Robert',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Mr.',
'BirthDate': new Date(-302731200000),
'HireDate': new Date(757486800000),
'Address': 'Edgeham Hollow\r\nWinchester Way',
'City': 'London',
'Region': null,
'PostalCode': 'RG1 9SP',
'Country': 'UK',
'HomePhone': '(71) 555-5598',
'Extension': '465',
'Photo': { 'Length': 21626 },
'Notes': 'Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the \
University of Michigan in 1992, the year he joined the company. After completing a course entitled \'Selling in Europe,\' \
he was transferred to the London office in March 1993.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 8,
'LastName': 'Callahan',
'FirstName': 'Laura',
'Title': 'Inside Sales Coordinator',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-377982000000),
'HireDate': new Date(762843600000),
'Address': '4726 - 11th Ave. N.E.',
'City': 'Seattle',
'Region': 'WA',
'PostalCode': '98105',
'Country': 'USA',
'HomePhone': '(206) 555-1189',
'Extension': '2344',
'Photo': { 'Length': 21626 },
'Notes': 'Laura received a BA in psychology from the University of Washington. She has also completed a course in business \
French. She reads and writes French.',
'ReportsTo': 2,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
},
{
'EmployeeID': 9,
'LastName': 'Dodsworth',
'FirstName': 'Anne',
'Title': 'Sales Representative',
'TitleOfCourtesy': 'Ms.',
'BirthDate': new Date(-123966000000),
'HireDate': new Date(784875600000),
'Address': '7 Houndstooth Rd.',
'City': 'London',
'Region': null,
'PostalCode': 'WG2 7LT',
'Country': 'UK',
'HomePhone': '(71) 555-4444',
'Extension': '452',
'Photo': { 'Length': 21626 },
'Notes': 'Anne has a BA degree in English from St. Lawrence College. She is fluent in French and German.',
'ReportsTo': 5,
'PhotoPath': 'http://accweb/emmployees/davolio.bmp'
}];
var order = JSON.stringify([
{
'OrderID': 10248,
'CustomerID': 'VINET',
'CustomerName': 'Maria ',
'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',
'EmployeeID': 3
},
{
'OrderID': 10249,
'CustomerID': 'TOMSP',
'CustomerName': 'Ana Trujillo',
'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',
'EmployeeID': 5
},
{
'OrderID': 10250,
'CustomerID': 'HANAR',
'CustomerName': 'Antonio Moreno',
'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',
'EmployeeID': 1
},
{
'OrderID': 10251,
'CustomerID': 'VICTE',
'CustomerName': 'Thomas Hardy',
'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',
'EmployeeID': 6
},
{
'OrderID': 10252,
'CustomerID': 'SUPRD',
'CustomerName': 'Christina Berglund',
'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',
'EmployeeID': 2
},
{
'OrderID': 10253,
'CustomerID': 'HANAR',
'CustomerName': 'Hanna Moos',
'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',
'EmployeeID': 4
},
{
'OrderID': 10254,
'CustomerID': 'CHOPS',
'CustomerName': 'Frédérique Citeaux',
'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',
'EmployeeID': 9
},
{
'OrderID': 10255,
'CustomerID': 'RICSU',
'CustomerName': 'Martín Sommer',
'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',
'EmployeeID': 7
},
{
'OrderID': 10256,
'CustomerID': 'WELLI',
'CustomerName': 'Laurence Lebihan',
'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',
'EmployeeID': 8
},
{
'OrderID': 10257,
'CustomerID': 'HILAA',
'CustomerName': 'Elizabeth Lincoln',
'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',
'EmployeeID': 5
},
{
'OrderID': 10258,
'CustomerID': 'ERNSH',
'CustomerName': 'Victoria Ashworth',
'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',
'EmployeeID': 1
},
{
'OrderID': 10259,
'CustomerID': 'CENTC',
'CustomerName': 'Patricio Simpson',
'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',
'EmployeeID': 6
},
{
'OrderID': 10260,
'CustomerID': 'OTTIK',
'CustomerName': 'Francisco Chang',
'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',
'EmployeeID': 2
},
{
'OrderID': 10261,
'CustomerID': 'QUEDE',
'CustomerName': 'Yang Wang',
'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',
'EmployeeID': 7
},
{
'OrderID': 10262,
'CustomerID': 'RATTC',
'CustomerName': 'Pedro Afonso',
'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',
'EmployeeID': 4
},
{
'OrderID': 10263,
'CustomerID': 'ERNSH',
'CustomerName': 'Elizabeth Brown',
'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,
'ShipCountry': 'Austria',
'EmployeeID': 3
},
{
'OrderID': 10264,
'CustomerID': 'FOLKO',
'CustomerName': 'Sven Ottlieb',
'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',
'EmployeeID': 8
},
{
'OrderID': 10265,
'CustomerID': 'BLONP',
'CustomerName': 'Ann Devon',
'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',
'EmployeeID': 3
},
{
'OrderID': 10266,
'CustomerID': 'WARTH',
'CustomerName': 'Roland Mendel',
'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',
'EmployeeID': 2
},
{
'OrderID': 10267,
'CustomerID': 'FRANK',
'CustomerName': 'Aria Cruz',
'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',
'EmployeeID': 4
},
{
'OrderID': 10268,
'CustomerID': 'GROSR',
'CustomerName': 'Diego Roel',
'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',
'EmployeeID': 2
},
{
'OrderID': 10269,
'CustomerID': 'WHITC',
'CustomerName': 'Martine Rancé',
'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',
'EmployeeID': 1
},
{
'OrderID': 10270,
'CustomerID': 'WARTH',
'CustomerName': 'Maria Larsson',
'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',
'EmployeeID': 4
},
{
'OrderID': 10271,
'CustomerID': 'SPLIR',
'CustomerName': 'Peter Franken',
'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',
'EmployeeID': 5
},
{
'OrderID': 10272,
'CustomerID': 'RATTC',
'CustomerName': 'Carine Schmitt',
'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',
'EmployeeID': 3
},
{
'OrderID': 10273,
'CustomerID': 'QUICK',
'CustomerName': 'Paolo Accorti',
'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',
'EmployeeID': 6
},
{
'OrderID': 10274,
'CustomerID': 'VINET',
'CustomerName': 'Lino Rodriguez',
'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',
'EmployeeID': 1
},
{
'OrderID': 10275,
'CustomerID': 'MAGAA',
'CustomerName': 'Eduardo Saavedra',
'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',
'EmployeeID': 3
},
{
'OrderID': 10276,
'CustomerID': 'TORTU',
'CustomerName': 'José Pedro Freyre',
'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',
'EmployeeID': 5
},
{
'OrderID': 10277,
'CustomerID': 'MORGK',
'CustomerName': 'André Fonseca',
'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',
'EmployeeID': 7
},
{
'OrderID': 10278,
'CustomerID': 'BERGS',
'CustomerName': 'Howard Snyder',
'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',
'EmployeeID': 9
},
{
'OrderID': 10279,
'CustomerID': 'LEHMS',
'CustomerName': 'Manuel Pereira',
'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',
'EmployeeID': 2
},
{
'OrderID': 10280,
'CustomerID': 'BERGS',
'CustomerName': 'Mario Pontes',
'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',
'EmployeeID': 4
},
{
'OrderID': 10281,
'CustomerID': 'ROMEY',
'CustomerName': 'Carlos Hernández',
'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',
'EmployeeID': 6
},
{
'OrderID': 10282,
'CustomerID': 'ROMEY',
'CustomerName': 'Yoshi Latimer',
'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',
'EmployeeID': 8
},
{
'OrderID': 10283,
'CustomerID': 'LILAS',
'CustomerName': 'Patricia McKenna',
'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',
'EmployeeID': 9
},
{
'OrderID': 10284,
'CustomerID': 'LEHMS',
'CustomerName': 'Helen Bennett',
'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',
'EmployeeID': 6
},
{
'OrderID': 10285,
'CustomerID': 'QUICK',
'CustomerName': 'Philip Cramer',
'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',
'EmployeeID': 3
},
{
'OrderID': 10286,
'CustomerID': 'QUICK',
'CustomerName': 'Daniel Tonini',
'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',
'EmployeeID': 1
},
{
'OrderID': 10287,
'CustomerID': 'RICAR',
'CustomerName': 'Annette Roulet',
'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',
'EmployeeID': 8
},
{
'OrderID': 10288,
'CustomerID': 'REGGC',
'CustomerName': 'Yoshi Tannamuri',
'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',
'EmployeeID': 4
},
{
'OrderID': 10289,
'CustomerID': 'BSBEV',
'CustomerName': 'John Steel',
'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',
'EmployeeID': 2
},
{
'OrderID': 10290,
'CustomerID': 'COMMI',
'CustomerNames': 'Renate Messner',
'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',
'EmployeeID': 5
},
{
'OrderID': 10291,
'CustomerID': 'QUEDE',
'CustomerName': 'Jaime Yorres',
'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',
'EmployeeID': 7
},
{
'OrderID': 10292,
'CustomerID': 'TRADH',
'CustomerName': 'Carlos González',
'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',
'EmployeeID': 3
},
{
'OrderID': 10293,
'CustomerID': 'TORTU',
'CustomerName': 'Felipe Izquierdo',
'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',
'EmployeeID': 1
},
{
'OrderID': 10294,
'CustomerID': 'RATTC',
'CustomerName': 'Fran Wilson',
'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',
'EmployeeID': 2
},
{
'OrderID': 10295,
'CustomerID': 'VINET',
'CustomerName': 'Giovanni Rovelli',
'OrderDate': '1996-09-02T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 1.15,
'ShipName': 'Vins et alcools Chevalier',
'ShipAddress': '59 rue de l Abbaye',
'ShipCity': 'Reims',
'ShipRegion': null,
'ShipCountry': 'France',
'EmployeeID': 3
},
{
'OrderID': 10296,
'CustomerID': 'LILAS',
'CustomerName': 'Catherine Dewey',
'OrderDate': '1996-09-03T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 0.12,
'ShipName': 'LILA-Supermercado',
'ShipAddress': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'ShipCity': 'Barquisimeto',
'ShipRegion': 'Lara',
'ShipCountry': 'Venezuela',
'EmployeeID': 4
},
{
'OrderID': 10297,
'CustomerID': 'BLONP',
'CustomerName': 'Jean Fresnière',
'OrderDate': '1996-09-04T00:00:00.000Z',
'ShippedDate': '1996-09-10T00:00:00.000Z',
'Freight': 5.74,
'ShipName': 'Blondel père et fils',
'ShipAddress': '24, place Kléber',
'ShipCity': 'Strasbourg',
'ShipRegion': null,
'ShipCountry': 'France',
'EmployeeID': 5
},
{
'OrderID': 10298,
'CustomerID': 'HUNGO',
'CustomerName': 'Alexander Feuer',
'OrderDate': '1996-09-05T00:00:00.000Z',
'ShippedDate': '1996-09-11T00:00:00.000Z',
'Freight': 168.22,
'ShipName': 'Hungry Owl All-Night Grocers',
'ShipAddress': '8 Johnstown Road',
'ShipCity': 'Cork',
'ShipRegion': 'Co. Cork',
'ShipCountry': 'Ireland',
'EmployeeID': 6
},
{
'OrderID': 10299,
'CustomerID': 'RICAR',
'CustomerName': 'Simon Crowther',
'OrderDate': '1996-09-06T00:00:00.000Z',
'ShippedDate': '1996-09-13T00:00:00.000Z',
'Freight': 29.76,
'ShipName': 'Ricardo Adocicados',
'ShipAddress': 'Av. Copacabana, 267',
'ShipCity': 'Rio de Janeiro',
'ShipRegion': 'RJ',
'ShipCountry': 'Brazil',
'EmployeeID': 7
},
{
'OrderID': 10300,
'CustomerID': 'MAGAA',
'CustomerNames': 'Yvonne Moncada',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 17.68,
'ShipName': 'Magazzini Alimentari Riuniti',
'ShipAddress': 'Via Ludovico il Moro 22',
'ShipCity': 'Bergamo',
'ShipRegion': null,
'ShipCountry': 'Italy',
'EmployeeID': 8
},
{
'OrderID': 10301,
'CustomerID': 'WANDK',
'CustomerName': 'Rene Phillips',
'OrderDate': '1996-09-09T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 45.08,
'ShipName': 'Die Wandernde Kuh',
'ShipAddress': 'Adenauerallee 900',
'ShipCity': 'Stuttgart',
'ShipRegion': null,
'ShipCountry': 'Germany',
'EmployeeID': 9
},
{
'OrderID': 10302,
'CustomerID': 'SUPRD',
'CustomerName': 'Pirkko Koskitalo',
'OrderDate': '1996-09-10T00:00:00.000Z',
'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 6.27,
'ShipName': 'Suprêmes délices',
'ShipAddress': 'Boulevard Tirou, 255',
'ShipCity': 'Charleroi',
'ShipRegion': null,
'ShipCountry': 'Belgium',
'EmployeeID': 2
},
{
'OrderID': 10303,
'CustomerID': 'GODOS',
'CustomerName': 'Paula Parente',
'OrderDate': '1996-09-11T00:00:00.000Z',
'ShippedDate': '1996-09-18T00:00:00.000Z',
'Freight': 107.83,
'ShipName': 'Godos Cocina Típica',
'ShipAddress': 'C/ Romero, 33',
'ShipCity': 'Sevilla',
'ShipRegion': null,
'ShipCountry': 'Spain',
'EmployeeID': 4
},
{
'OrderID': 10304,
'CustomerID': 'TORTU',
'CustomerName': 'Karl Jablonski',
'OrderDate': '1996-09-12T00:00:00.000Z',
'ShippedDate': '1996-09-17T00:00:00.000Z',
'Freight': 63.79,
'ShipName': 'Tortuga Restaurante',
'ShipAddress': 'Avda. Azteca 123',
'ShipCity': 'México D.F.',
'ShipRegion': null,
'ShipCountry': 'Mexico',
'EmployeeID': 8
},
{
'OrderID': 10305,
'CustomerID': 'OLDWO',
'CustomerName': 'Matti Karttunen',
'OrderDate': '1996-09-13T00:00:00.000Z',
'ShippedDate': '1996-10-09T00:00:00.000Z',
'Freight': 257.62,
'ShipName': 'Old World Delicatessen',
'ShipAddress': '2743 Bering St.',
'ShipCity': 'Anchorage',
'ShipRegion': 'AK',
'ShipCountry': 'USA',
'EmployeeID': 6
},
{
'OrderID': 10306,
'CustomerID': 'ROMEY',
'CustomerName': 'Zbyszek Piestrzeniewicz',
'OrderDate': '1996-09-16T00:00:00.000Z',
'ShippedDate': '1996-09-23T00:00:00.000Z',
'Freight': 7.56,
'ShipName': 'Romero y tomillo',
'ShipAddress': 'Gran Vía, 1',
'ShipCity': 'Madrid',
'ShipRegion': null,
'ShipCountry': 'Spain',
'EmployeeID': 3
},
{
'OrderID': 10307,
'CustomerID': 'LONEP',
'CustomerName': 'Zbyszek Piestrzeniewicz',
'OrderDate': '1996-09-17T00:00:00.000Z',
'ShippedDate': '1996-09-25T00:00:00.000Z',
'Freight': 0.56,
'ShipName': 'Lonesome Pine Restaurant',
'ShipAddress': '89 Chiaroscuro Rd.',
'ShipCity': 'Portland',
'ShipRegion': 'OR',
'ShipCountry': 'USA',
'EmployeeID': 1
}
]);
export let orderDetails: object[] = JSON.parse(order, function (field, value) {
var dupValue = value;
if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
var arr = dupValue.split(/[^0-9]/);
value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10));
}
return value;
});
export let customerData: object[] = [
{
'CustomerID': 'ALFKI',
'ContactName': 'Maria ',
'CompanyName': 'Alfreds Futterkiste',
'Address': 'Obere Str. 57',
'Country': 'Germany'
},
{
'CustomerID': 'ANATR',
'ContactName': 'Ana Trujillo',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'Address': 'Avda. de la Constitución 2222',
'Country': 'Mexico'
},
{
'CustomerID': 'ANTON',
'ContactName': 'Antonio Moreno',
'CompanyName': 'Antonio Moreno Taquería',
'Address': 'Mataderos 2312',
'Country': 'Mexico'
},
{
'CustomerID': 'AROUT',
'ContactName': 'Thomas Hardy',
'CompanyName': 'Around the Horn',
'Address': '120 Hanover Sq.',
'Country': 'UK'
},
{
'CustomerID': 'BERGS',
'ContactName': 'Christina Berglund',
'CompanyName': 'Berglunds snabbköp',
'Address': 'Berguvsvägen 8',
'Country': 'Sweden'
},
{
'CustomerID': 'BLAUS',
'ContactName': 'Hanna Moos',
'CompanyName': 'Blauer See Delikatessen',
'Address': 'Forsterstr. 57',
'Country': 'Germany'
},
{
'CustomerID': 'BLONP',
'ContactName': 'Frédérique Citeaux',
'CompanyName': 'Blondesddsl père et fils',
'Address': '24, place Kléber',
'Country': 'France'
},
{
'CustomerID': 'BOLID',
'ContactName': 'Martín Sommer',
'CompanyName': 'Bólido Comidas preparadas',
'Address': 'C/ Araquil, 67',
'Country': 'Spain'
},
{
'CustomerID': 'BONAP',
'ContactName': 'Laurence Lebihan',
'CompanyName': 'Bon app',
'Address': '12, rue des Bouchers',
'Country': 'France'
},
{
'CustomerID': 'BOTTM',
'ContactName': 'Elizabeth Lincoln',
'CompanyName': 'Bottom-Dollar Markets',
'Address': '23 Tsawassen Blvd.',
'Country': 'Canada'
},
{
'CustomerID': 'BSBEV',
'ContactName': 'Victoria Ashworth',
'CompanyName': 'B\'s Beverages',
'Address': 'Fauntleroy Circus',
'Country': 'UK'
},
{
'CustomerID': 'CACTU',
'ContactName': 'Patricio Simpson',
'CompanyName': 'Cactus Comidas para llevar',
'Address': 'Cerrito 333',
'Country': 'Argentina'
},
{
'CustomerID': 'CENTC',
'ContactName': 'Francisco Chang',
'CompanyName': 'Centro comercial Moctezuma',
'Address': 'Sierras de Granada 9993',
'Country': 'Mexico'
},
{
'CustomerID': 'CHOPS',
'ContactName': 'Yang Wang',
'CompanyName': 'Chop-suey Chinese',
'Address': 'Hauptstr. 29',
'Country': 'Switzerland'
},
{
'CustomerID': 'COMMI',
'ContactName': 'Pedro Afonso',
'CompanyName': 'Comércio Mineiro',
'Address': 'Av. dos Lusíadas, 23',
'Country': 'Brazil'
},
{
'CustomerID': 'CONSH',
'ContactName': 'Elizabeth Brown',
'CompanyName': 'Consolidated Holdings',
'Address': 'Berkeley Gardens 12 Brewery',
'Country': 'UK'
},
{
'CustomerID': 'DRACD',
'ContactName': 'Sven Ottlieb',
'CompanyName': 'Drachenblut Delikatessen',
'Address': 'Walserweg 21',
'Country': 'Germany'
},
{
'CustomerID': 'DUMON',
'ContactName': 'Janine Labrune',
'CompanyName': 'Du monde entier',
'Address': '67, rue des Cinquante Otages',
'Country': 'France'
},
{
'CustomerID': 'EASTC',
'ContactName': 'Ann Devon',
'CompanyName': 'Eastern Connection',
'Address': '35 King George',
'Country': 'UK'
},
{
'CustomerID': 'ERNSH',
'ContactName': 'Roland Mendel',
'CompanyName': 'Ernst Handel',
'Address': 'Kirchgasse 6',
'Country': 'Austria'
},
{
'CustomerID': 'FAMIA',
'ContactName': 'Aria Cruz',
'CompanyName': 'Familia Arquibaldo',
'Address': 'Rua Orós, 92',
'Country': 'Brazil'
},
{
'CustomerID': 'FISSA',
'ContactName': 'Diego Roel',
'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.',
'Address': 'C/ Moralzarzal, 86',
'Country': 'Spain'
},
{
'CustomerID': 'FOLIG',
'ContactName': 'Martine Rancé',
'CompanyName': 'Folies gourmandes',
'Address': '184, chaussée de Tournai',
'Country': 'France'
},
{
'CustomerID': 'FOLKO',
'ContactName': 'Maria Larsson',
'CompanyName': 'Folk och fä HB',
'Address': 'Åkergatan 24',
'Country': 'Sweden'
},
{
'CustomerID': 'FRANK',
'ContactName': 'Peter Franken',
'CompanyName': 'Frankenversand',
'Address': 'Berliner Platz 43',
'Country': 'Germany'
},
{
'CustomerID': 'FRANR',
'ContactName': 'Carine Schmitt',
'CompanyName': 'France restauration',
'Address': '54, rue Royale',
'Country': 'France'
},
{
'CustomerID': 'FRANS',
'ContactName': 'Paolo Accorti',
'CompanyName': 'Franchi S.p.A.',
'Address': 'Via Monte Bianco 34',
'Country': 'Italy'
},
{
'CustomerID': 'FURIB',
'ContactName': 'Lino Rodriguez',
'CompanyName': 'Furia Bacalhau e Frutos do Mar',
'Address': 'Jardim das rosas n. 32',
'Country': 'Portugal'
},
{
'CustomerID': 'GALED',
'ContactName': 'Eduardo Saavedra',
'CompanyName': 'Galería del gastrónomo',
'Address': 'Rambla de Cataluña, 23',
'Country': 'Spain'
},
{
'CustomerID': 'GODOS',
'ContactName': 'José Pedro Freyre',
'CompanyName': 'Godos Cocina Típica',
'Address': 'C/ Romero, 33',
'Country': 'Spain'
},
{
'CustomerID': 'GOURL',
'ContactName': 'André Fonseca',
'CompanyName': 'Gourmet Lanchonetes',
'Address': 'Av. Brasil, 442',
'Country': 'Brazil'
},
{
'CustomerID': 'GREAL',
'ContactName': 'Howard Snyder',
'CompanyName': 'Great Lakes Food Market',
'Address': '2732 Baker Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'GROSR',
'ContactName': 'Manuel Pereira',
'CompanyName': 'GROSELLA-Restaurante',
'Address': '5ª Ave. Los Palos Grandes',
'Country': 'Venezuela'
},
{
'CustomerID': 'HANAR',
'ContactName': 'Mario Pontes',
'CompanyName': 'Hanari Carnes',
'Address': 'Rua do Paço, 67',
'Country': 'Brazil'
},
{
'CustomerID': 'HILAA',
'ContactName': 'Carlos Hernández',
'CompanyName': 'HILARION-Abastos',
'Address': 'Carrera 22 con Ave. Carlos Soublette #8-35',
'Country': 'Venezuela'
},
{
'CustomerID': 'HUNGC',
'ContactName': 'Yoshi Latimer',
'CompanyName': 'Hungry Coyote Import Store',
'Address': 'City Center Plaza 516 Main St.',
'Country': 'USA'
},
{
'CustomerID': 'HUNGO',
'ContactName': 'Patricia McKenna',
'CompanyName': 'Hungry Owl All-Night Grocers',
'Address': '8 Johnstown Road',
'Country': 'Ireland'
},
{
'CustomerID': 'ISLAT',
'ContactName': 'Helen Bennett',
'CompanyName': 'Island Trading',
'Address': 'Garden House Crowther Way',
'Country': 'UK'
},
{
'CustomerID': 'KOENE',
'ContactName': 'Philip Cramer',
'CompanyName': 'Königlich Essen',
'Address': 'Maubelstr. 90',
'Country': 'Germany'
},
{
'CustomerID': 'LACOR',
'ContactName': 'Daniel Tonini',
'CompanyName': 'La corne d\'abondance',
'Address': '67, avenue de l\'Europe',
'Country': 'France'
},
{
'CustomerID': 'LAMAI',
'ContactName': 'Annette Roulet',
'CompanyName': 'La maison d\'Asie',
'Address': '1 rue Alsace-Lorraine',
'Country': 'France'
},
{
'CustomerID': 'LAUGB',
'ContactName': 'Yoshi Tannamuri',
'CompanyName': 'Laughing Bacchus Wine Cellars',
'Address': '1900 Oak St.',
'Country': 'Canada'
},
{
'CustomerID': 'LAZYK',
'ContactName': 'John Steel',
'CompanyName': 'Lazy K Kountry Store',
'Address': '12 Orchestra Terrace',
'Country': 'USA'
},
{
'CustomerID': 'LEHMS',
'ContactName': 'Renate Messner',
'CompanyName': 'Lehmanns Marktstand',
'Address': 'Magazinweg 7',
'Country': 'Germany'
},
{
'CustomerID': 'LETSS',
'ContactName': 'Jaime Yorres',
'CompanyName': 'Let\'s Stop N Shop',
'Address': '87 Polk St. Suite 5',
'Country': 'USA'
},
{
'CustomerID': 'LILAS',
'ContactName': 'Carlos González',
'CompanyName': 'LILA-Supermercado',
'Address': 'Carrera 52 con Ave. Bolívar #65-98 Llano Largo',
'Country': 'Venezuela'
},
{
'CustomerID': 'LINOD',
'ContactName': 'Felipe Izquierdo',
'CompanyName': 'LINO-Delicateses',
'Address': 'Ave. 5 de Mayo Porlamar',
'Country': 'Venezuela'
},
{
'CustomerID': 'LONEP',
'ContactName': 'Fran Wilson',
'CompanyName': 'Lonesome Pine Restaurant',
'Address': '89 Chiaroscuro Rd.',
'Country': 'USA'
},
{
'CustomerID': 'MAGAA',
'ContactName': 'Giovanni Rovelli',
'CompanyName': 'Magazzini Alimentari Riuniti',
'Address': 'Via Ludovico il Moro 22',
'Country': 'Italy'
},
{
'CustomerID': 'MAISD',
'ContactName': 'Catherine Dewey',
'CompanyName': 'Maison Dewey',
'Address': 'Rue Joseph-Bens 532',
'Country': 'Belgium'
},
{
'CustomerID': 'MEREP',
'ContactName': 'Jean Fresnière',
'CompanyName': 'Mère Paillarde',
'Address': '43 rue St. Laurent',
'Country': 'Canada'
},
{
'CustomerID': 'MORGK',
'ContactName': 'Alexander Feuer',
'CompanyName': 'Morgenstern Gesundkost',
'Address': 'Heerstr. 22',
'Country': 'Germany'
},
{
'CustomerID': 'NORTS',
'ContactName': 'Simon Crowther',
'CompanyName': 'North/South',
'Address': 'South House 300 Queensbridge',
'Country': 'UK'
},
{
'CustomerID': 'OCEAN',
'ContactName': 'Yvonne Moncada',
'CompanyName': 'Océano Atlántico Ltda.',
'Address': 'Ing. Gustavo Moncada 8585 Piso 20-A',
'Country': 'Argentina'
},
{
'CustomerID': 'OLDWO',
'ContactName': 'Rene Phillips',
'CompanyName': 'Old World Delicatessen',
'Address': '2743 Bering St.',
'Country': 'USA'
},
{
'CustomerID': 'OTTIK',
'ContactName': 'Henriette Pfalzheim',
'CompanyName': 'Ottilies Käseladen',
'Address': 'Mehrheimerstr. 369',
'Country': 'Germany'
},
{
'CustomerID': 'PARIS',
'ContactName': 'Marie Bertrand',
'CompanyName': 'Paris spécialités',
'Address': '265, boulevard Charonne',
'Country': 'France'
},
{
'CustomerID': 'PERIC',
'ContactName': 'Guillermo Fernández',
'CompanyName': 'Pericles Comidas clásicas',
'Address': 'Calle Dr. Jorge Cash 321',
'Country': 'Mexico'
},
{
'CustomerID': 'PICCO',
'ContactName': 'Georg Pipps',
'CompanyName': 'Piccolo und mehr',
'Address': 'Geislweg 14',
'Country': 'Austria'
},
{
'CustomerID': 'PRINI',
'ContactName': 'Isabel de Castro',
'CompanyName': 'Princesa Isabel Vinhos',
'Address': 'Estrada da saúde n. 58',
'Country': 'Portugal'
},
{
'CustomerID': 'QUEDE',
'ContactName': 'Bernardo Batista',
'CompanyName': 'Que Delícia',
'Address': 'Rua da Panificadora, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'QUEEN',
'ContactName': 'Lúcia Carvalho',
'CompanyName': 'Queen Cozinha',
'Address': 'Alameda dos Canàrios, 891',
'Country': 'Brazil'
},
{
'CustomerID': 'QUICK',
'ContactName': 'Horst Kloss',
'CompanyName': 'QUICK-Stop',
'Address': 'Taucherstraße 10',
'Country': 'Germany'
},
{
'CustomerID': 'RANCH',
'ContactName': 'Sergio Gutiérrez',
'CompanyName': 'Rancho grande',
'Address': 'Av. del Libertador 900',
'Country': 'Argentina'
},
{
'CustomerID': 'RATTC',
'ContactName': 'Paula Wilson',
'CompanyName': 'Rattlesnake Canyon Grocery',
'Address': '2817 Milton Dr.',
'Country': 'USA'
},
{
'CustomerID': 'REGGC',
'ContactName': 'Maurizio Moroni',
'CompanyName': 'Reggiani Caseifici',
'Address': 'Strada Provinciale 124',
'Country': 'Italy'
},
{
'CustomerID': 'RICAR',
'ContactName': 'Janete Limeira',
'CompanyName': 'Ricardo Adocicados',
'Address': 'Av. Copacabana, 267',
'Country': 'Brazil'
},
{
'CustomerID': 'RICSU',
'ContactName': 'Michael Holz',
'CompanyName': 'Richter Supermarkt',
'Address': 'Grenzacherweg 237',
'Country': 'Switzerland'
},
{
'CustomerID': 'ROMEY',
'ContactName': 'Alejandra Camino',
'CompanyName': 'Romero y tomillo',
'Address': 'Gran Vía, 1',
'Country': 'Spain'
},
{
'CustomerID': 'SANTG',
'ContactName': 'Jonas Bergulfsen',
'CompanyName': 'Santé Gourmet',
'Address': 'Erling Skakkes gate 78',
'Country': 'Norway'
},
{
'CustomerID': 'SAVEA',
'ContactName': 'Jose Pavarotti',
'CompanyName': 'Save-a-lot Markets',
'Address': '187 Suffolk Ln.',
'Country': 'USA'
},
{
'CustomerID': 'SEVES',
'ContactName': 'Hari Kumar',
'CompanyName': 'Seven Seas Imports',
'Address': '90 Wadhurst Rd.',
'Country': 'UK'
},
{
'CustomerID': 'SIMOB',
'ContactName': 'Jytte Petersen',
'CompanyName': 'Simons bistro',
'Address': 'Vinbæltet 34',
'Country': 'Denmark'
},
{
'CustomerID': 'SPECD',
'ContactName': 'Dominique Perrier',
'CompanyName': 'Spécialités du monde',
'Address': '25, rue Lauriston',
'Country': 'France'
},
{
'CustomerID': 'SPLIR',
'ContactName': 'Art Braunschweiger',
'CompanyName': 'Split Rail Beer & Ale',
'Address': 'P.O. Box 555',
'Country': 'USA'
},
{
'CustomerID': 'SUPRD',
'ContactName': 'Pascale Cartrain',
'CompanyName': 'Suprêmes délices',
'Address': 'Boulevard Tirou, 255',
'Country': 'Belgium'
},
{
'CustomerID': 'THEBI',
'ContactName': 'Liz Nixon',
'CompanyName': 'The Big Cheese',
'Address': '89 Jefferson Way Suite 2',
'Country': 'USA'
},
{
'CustomerID': 'THECR',
'ContactName': 'Liu Wong',
'CompanyName': 'The Cracker Box',
'Address': '55 Grizzly Peak Rd.',
'Country': 'USA'
},
{
'CustomerID': 'TOMSP',
'ContactName': 'Karin Josephs',
'CompanyName': 'Toms Spezialitäten',
'Address': 'Luisenstr. 48',
'Country': 'Germany'
},
{
'CustomerID': 'TORTU',
'ContactName': 'Miguel Angel Paolino',
'CompanyName': 'Tortuga Restaurante',
'Address': 'Avda. Azteca 123',
'Country': 'Mexico'
},
{
'CustomerID': 'TRADH',
'ContactName': 'Anabela Domingues',
'CompanyName': 'Tradição Hipermercados',
'Address': 'Av. Inês de Castro, 414',
'Country': 'Brazil'
},
{
'CustomerID': 'TRAIH',
'ContactName': 'Helvetius Nagy',
'CompanyName': 'Trail\'s Head Gourmet Provisioners',
'Address': '722 DaVinci Blvd.',
'Country': 'USA'
},
{
'CustomerID': 'VAFFE',
'ContactName': 'Palle Ibsen',
'CompanyName': 'Vaffeljernet',
'Address': 'Smagsloget 45',
'Country': 'Denmark'
},
{
'CustomerID': 'VICTE',
'ContactName': 'Mary Saveley',
'CompanyName': 'Victuailles en stock',
'Address': '2, rue du Commerce',
'Country': 'France'
},
{
'CustomerID': 'VINET',
'ContactName': 'Paul Henriot',
'CompanyName': 'Vins et alcools Chevalier',
'Address': '59 rue de l\'Abbaye',
'Country': 'France'
},
{
'CustomerID': 'WANDK',
'ContactName': 'Rita Müller',
'CompanyName': 'Die Wandernde Kuh',
'Address': 'Adenauerallee 900',
'Country': 'Germany'
},
{
'CustomerID': 'WARTH',
'ContactName': 'Pirkko Koskitalo',
'CompanyName': 'Wartian Herkku',
'Address': 'Torikatu 38',
'Country': 'Finland'
},
{
'CustomerID': 'WELLI',
'ContactName': 'Paula Parente',
'CompanyName': 'Wellington Importadora',
'Address': 'Rua do Mercado, 12',
'Country': 'Brazil'
},
{
'CustomerID': 'WHITC',
'ContactName': 'Karl Jablonski',
'CompanyName': 'White Clover Markets',
'Address': '305 - 14th Ave. S. Suite 3B',
'Country': 'USA'
},
{
'CustomerID': 'WILMK',
'ContactName': 'Matti Karttunen',
'CompanyName': 'Wilman Kala',
'Address': 'Keskuskatu 45',
'Country': 'Finland'
},
{
'CustomerID': 'WOLZA',
'ContactName': 'Zbyszek Piestrzeniewicz',
'CompanyName': 'Wolski Zajazd',
'Address': 'ul. Filtrowa 68',
'Country': 'Poland'
}
];Edit template in foreign key column using remote data
The Grid supports customization of edit templates for foreign key columns when using remote data. By default, a DropDownList component renders for editing. Alternative components can be rendered by configuring the column.edit property.
The following example demonstrates a complete implementation with React and ASP.NET Core. An AutoComplete component is rendered as the edit template for the “EmployeeID” foreign key column. The dataSource property of the AutoComplete component is set to the employees data from the remote API, and the field property is configured to display the “FirstName” field as the value.
Step 1: Open Visual Studio and create a React and ASP.NET Core project named EditTemplate. Refer to the documentation link for detailed steps.
Step 2: Create a Grid following the Getting Started documentation.
Step 3: In the React component styles file (styles.css), include the following styles to import necessary Syncfusion® styles:
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-react-grids/styles/material3.css';Step 4: In the React component file (e.g., App.js), define the Grid with the required configurations, including a foreign key column for “EmployeeID”, and implement the required logic to manage its behavior.
import './App.css';
import { ColumnDirective, ColumnsDirective, GridComponent, Toolbar, Edit, ForeignKey, Inject } from '@syncfusion/ej2-react-grids';
import { DataManager, UrlAdaptor } from "@syncfusion/ej2-data";
import { createElement, getValue } from '@syncfusion/ej2-base';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
function App() {
// Configure remote data sources with API URLs
const data = new DataManager({
url: 'https://localhost:****/api/Grid', // Main data endpoint
insertUrl: 'https://localhost:****/api/Grid/Insert', // Create operation
updateUrl: 'https://localhost:****/api/Grid/Update', // Update operation
removeUrl: 'https://localhost:****/api/Grid/Remove', // Delete operation
adaptor: new UrlAdaptor()
}); //Use remote server host number instead ****.
// Configure foreign key data source for employee information
const employeeData = new DataManager({
url: 'https://localhost:****/api/Grid/employees', // Employee data endpoint
adaptor: new UrlAdaptor(),
crossDomain: true,
}); //Use remote server host number instead ****.
const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };
const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const orderIDRules = { required: true };
let autoComplete;
// Define custom edit template with AutoComplete component
const edit = {
create: () => {
// Step 1: Create input element for AutoComplete
return createElement('input');
},
destroy: () => {
// Step 4: Clean up AutoComplete when editing ends
autoComplete.destroy();
},
read: () => {
// Step 3: Return selected employee ID when saving
return autoComplete.itemData?.employeeID;
},
write: (args) => {
// Step 2: Initialize AutoComplete with current employee name
let selectedValue = args.foreignKeyData?.length > 0 ? args.foreignKeyData[0]['firstName'] : '';
autoComplete = new AutoComplete({
dataSource: employeeData,
fields: { value: 'firstName' }, // Display employee first names
value: selectedValue // Set current employee name
});
autoComplete.appendTo(args.element);
}
};
return (
<>
<GridComponent dataSource={data} editSettings={editSettings} toolbar={toolbar} height={250}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' isPrimaryKey={true} width='100' textAlign='Right' validationRules={orderIDRules}></ColumnDirective>
{/* Foreign key column with custom AutoComplete editor */}
<ColumnDirective
field='EmployeeID'
headerText='Employee Name'
foreignKeyValue='FirstName' // Display employee first name
foreignKeyField='EmployeeID' // Match on employee ID
dataSource={employeeData} // Remote employee data
edit={edit} // Custom AutoComplete editor
width='120'>
</ColumnDirective>
<ColumnDirective field='Freight' headerText='Freight' format='C2' editType='numericedit' width='100'></ColumnDirective>
<ColumnDirective field='ShipCity' headerText='Ship City' width='150' />
</ColumnsDirective>
<Inject services={[Toolbar, Edit, ForeignKey]} />
</GridComponent>
</>
);
};
export default App;Step 5: On the server side, create a controller named GridController.cs under the Controllers folder for handling API requests.
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Base;
using EditTemplate.Server.Models;
namespace EditTemplate.Server.Controllers
{
[ApiController]
public class GridController : Controller
{
[HttpGet]
[Route("employees")]
public ActionResult<List<Employee>> GetEmployees()
{
return Employee.GetAllEmployees();
}
[HttpPost]
[Route("api/[controller]")]
public object Post()
{
// Retrieve data from the data source (e.g., database).
IQueryable<OrdersDetails> DataSource = GetOrderData().AsQueryable();
// Get the total records count.
int totalRecordsCount = DataSource.Count();
// Return data based on the request.
return new { result = DataSource, count = totalRecordsCount };
}
[HttpPost]
[Route("api/[controller]/employees")]
public ActionResult<List<Employee>> employees()
{
return Employee.GetAllEmployees();
}
[HttpGet]
[Route("api/[controller]")]
public List<OrdersDetails> GetOrderData()
{
var data = OrdersDetails.GetAllRecords().ToList();
return data;
}
/// <summary>
/// Inserts a new data item into the data collection.
/// </summary>
/// <param name="addRecord">The order to be inserted.</param>
/// <returns>It returns the newly inserted record detail.</returns>
[HttpPost]
[Route("api/[controller]/Insert")]
public ActionResult Insert([FromBody] CRUDModel<OrdersDetails> newRecord)
{
if (newRecord.value != null)
{
OrdersDetails.GetAllRecords().Insert(0, newRecord.value);
}
return Json(newRecord.value);
}
/// <summary>
/// Updates an existing order.
/// </summary>
/// <param name="updateRecord">The updated order details.</param>
/// <returns>It returns the updated order details.</returns>
[HttpPost]
[Route("api/[controller]/Update")]
public object Update([FromBody] CRUDModel<OrdersDetails> updatedRecord)
{
var updatedOrder = updatedRecord.value;
if (updatedOrder != null)
{
var data = OrdersDetails.GetAllRecords().FirstOrDefault(or => or.OrderID == updatedOrder.OrderID);
if (data != null)
{
// Update the existing record.
data.OrderID = updatedOrder.OrderID;
data.EmployeeID = updatedOrder.EmployeeID;
data.Freight = updatedOrder.Freight;
data.ShipCity = updatedOrder.ShipCity;
// Update other properties similarly.
}
}
return updatedRecord;
}
/// <summary>
/// Deletes an order.
/// </summary>
/// <param name="deletedRecord">It contains the specific record detail which is need to be removed.</param>
/// <returns>It returns the deleted record detail.</returns>
[HttpPost]
[Route("api/[controller]/Remove")]
public object Remove([FromBody] CRUDModel<OrdersDetails> deletedRecord)
{
int orderId = int.Parse(deletedRecord.key.ToString()); // Get key value from the deletedRecord.
var data = OrdersDetails.GetAllRecords().FirstOrDefault(orderData => orderData.OrderID == orderId);
if (data != null)
{
// Remove the record from the data collection.
OrdersDetails.GetAllRecords().Remove(data);
}
return deletedRecord;
}
public class CRUDModel<T> where T : class
{
public string? action { get; set; }
public string? keyColumn { get; set; }
public object? key { get; set; }
public T? value { get; set; }
public List<T>? added { get; set; }
public List<T>? changed { get; set; }
public List<T>? deleted { get; set; }
public IDictionary<string, object>? @params { get; set; }
}
}
}Step 6: Create a model class named OrdersDetails.cs under the Models folder to represent order data and employee data.
namespace EditTemplate.Server.Models
{
public class OrdersDetails
{
private static List<OrdersDetails> order = new List<OrdersDetails>();
public OrdersDetails() { }
public OrdersDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified,
DateTime OrderDate, string ShipCity, string ShipName, string ShipCountry,
DateTime ShippedDate, string ShipAddress)
{
this.OrderID = OrderID;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.ShipCity = ShipCity;
this.Verified = Verified;
this.OrderDate = OrderDate;
this.ShipName = ShipName;
this.ShipCountry = ShipCountry;
this.ShippedDate = ShippedDate;
this.ShipAddress = ShipAddress;
}
public static List<OrdersDetails> GetAllRecords()
{
if (order.Count == 0)
{
int code = 10000;
List<Employee> employees = Employee.GetAllEmployees();
int employeeCount = employees.Count;
for (int i = 1; i < 10; i++)
{
order.Add(new OrdersDetails(code++, "ALFKI", employees[(code + 0) % employeeCount].EmployeeID, 2.3 * i, false, new DateTime(1991, 05, 15), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
order.Add(new OrdersDetails(code++, "ANATR", employees[(code + 1) % employeeCount].EmployeeID, 3.3 * i, true, new DateTime(1990, 04, 04), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
order.Add(new OrdersDetails(code++, "ANTON", employees[(code + 2) % employeeCount].EmployeeID, 4.3 * i, true, new DateTime(1957, 11, 30), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
order.Add(new OrdersDetails(code++, "BLONP", employees[(code + 3) % employeeCount].EmployeeID, 5.3 * i, false, new DateTime(1930, 10, 22), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
order.Add(new OrdersDetails(code++, "BOLID", employees[(code + 4) % employeeCount].EmployeeID, 6.3 * i, true, new DateTime(1953, 02, 18), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
}
}
return order;
}
public int? OrderID { get; set; }
public string? CustomerID { get; set; }
public int? EmployeeID { get; set; }
public double? Freight { get; set; }
public string? ShipCity { get; set; }
public bool? Verified { get; set; }
public DateTime OrderDate { get; set; }
public string? ShipName { get; set; }
public string? ShipCountry { get; set; }
public DateTime ShippedDate { get; set; }
public string? ShipAddress { get; set; }
}
public class Employee
{
public int EmployeeID { get; set; }
public string? FirstName { get; set; }
public string? LastName { get; set; }
public string? Department { get; set; }
public string? Email { get; set; }
public string? PhoneNumber { get; set; }
public static List<Employee> GetAllEmployees()
{
return new List<Employee>
{
new Employee { EmployeeID = 1, FirstName = "John", LastName = "Doe", Department = "Sales", Email = "[email protected]", PhoneNumber = "123-456-7890" },
new Employee { EmployeeID = 2, FirstName = "David", LastName = "Smith", Department = "Marketing", Email = "[email protected]", PhoneNumber = "987-654-3210" },
new Employee { EmployeeID = 3, FirstName = "Maria", LastName = "Gonzalez", Department = "HR", Email = "[email protected]", PhoneNumber = "456-789-0123" },
new Employee { EmployeeID = 4, FirstName = "Sophia", LastName = "Brown", Department = "Finance", Email = "[email protected]", PhoneNumber = "321-654-0987" },
new Employee { EmployeeID = 5, FirstName = "James", LastName = "Wilson", Department = "IT", Email = "[email protected]", PhoneNumber = "654-321-7654" },
new Employee { EmployeeID = 6, FirstName = "Emma", LastName = "Taylor", Department = "Operations", Email = "[email protected]", PhoneNumber = "213-546-8790" },
new Employee { EmployeeID = 7, FirstName = "Daniel", LastName = "Anderson", Department = "Logistics", Email = "[email protected]", PhoneNumber = "789-654-3210" },
new Employee { EmployeeID = 8, FirstName = "Olivia", LastName = "Thomas", Department = "Procurement", Email = "[email protected]", PhoneNumber = "567-890-1234" },
new Employee { EmployeeID = 9, FirstName = "Michael", LastName = "Harris", Department = "R&D", Email = "[email protected]", PhoneNumber = "890-123-4567" },
new Employee { EmployeeID = 10, FirstName = "Lucas", LastName = "Martin", Department = "Customer Service", Email = "[email protected]", PhoneNumber = "345-678-9012" },
new Employee { EmployeeID = 11, FirstName = "Elijah", LastName = "Clark", Department = "Support", Email = "[email protected]", PhoneNumber = "741-852-9630" },
new Employee { EmployeeID = 12, FirstName = "Isabella", LastName = "Hall", Department = "Legal", Email = "[email protected]", PhoneNumber = "963-852-7410" },
new Employee { EmployeeID = 13, FirstName = "Ethan", LastName = "Young", Department = "Administration", Email = "[email protected]", PhoneNumber = "258-963-1470" },
new Employee { EmployeeID = 14, FirstName = "Charlotte", LastName = "Scott", Department = "Design", Email = "[email protected]", PhoneNumber = "147-258-3690" },
new Employee { EmployeeID = 15, FirstName = "Alexander", LastName = "Allen", Department = "Engineering", Email = "[email protected]", PhoneNumber = "369-147-2580" }
};
}
}
}Step 7: Add the following configuration in the Program.cs file.
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring OpenAPI at https://aka.ms/aspnet/openapi.
builder.Services.AddOpenApi();
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(builder =>
{
builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader();
});
});
var app = builder.Build();
app.UseCors();
app.UseDefaultFiles();
app.MapStaticAssets();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.MapOpenApi();
}
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.MapFallbackToFile("/index.html");
app.Run();