Skip to content

Commit 1470d6c

Browse files
flagmanAndrewflagmanAndrew
authored
Demo DataGrid ExcelJSExportMultipleGrids remove odata
Replace OData with local arrays in the ExcelJSExportMultipleGrids demo
1 parent d93c831 commit 1470d6c

11 files changed

Lines changed: 482 additions & 69 deletions

File tree

‎apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Angular/app/app.component.ts‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
66
import {
77
DxButtonModule, DxTabPanelModule, DxDataGridModule, DxDataGridComponent,
88
} from 'devextreme-angular';
9+
import { ArrayStore, DataSourceOptions } from 'devextreme-angular/common/data';
910
import { Workbook } from 'devextreme-exceljs-fork';
1011
import { saveAs } from 'file-saver-es';
1112
// Our demo infrastructure requires us to use 'file-saver-es'. We recommend that you use the official 'file-saver' package in your applications.
1213
import { exportDataGrid } from 'devextreme-angular/common/export/excel';
13-
14-
import 'devextreme-angular/common/data';
14+
import { Service } from './app.service';
1515

1616
if (!/localhost/.test(document.location.host)) {
1717
enableProdMode();
@@ -27,34 +27,37 @@ if (window && window.config?.packageConfigPaths) {
2727
selector: 'demo-app',
2828
templateUrl: `.${modulePrefix}/app.component.html`,
2929
styleUrls: [`.${modulePrefix}/app.component.css`],
30+
providers: [Service],
3031
})
3132

3233
export class AppComponent {
3334
@ViewChild('priceDataGrid', { static: false }) priceDataGrid: DxDataGridComponent;
3435

3536
@ViewChild('ratingDataGrid', { static: false }) ratingDataGrid: DxDataGridComponent;
3637

37-
priceDataSource = {
38-
store: {
39-
type: 'odata',
40-
version: 2,
41-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
42-
key: 'Product_ID',
43-
},
44-
select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
45-
filter: ['Product_ID', '<', 10],
46-
};
47-
48-
ratingDataSource = {
49-
store: {
50-
type: 'odata',
51-
version: 2,
52-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
53-
key: 'Product_ID',
54-
},
55-
select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
56-
filter: ['Product_ID', '<', 10],
57-
};
38+
priceDataSource: DataSourceOptions;
39+
40+
ratingDataSource: DataSourceOptions;
41+
42+
constructor(service: Service) {
43+
this.priceDataSource = {
44+
store: new ArrayStore({
45+
data: service.getProducts(),
46+
key: 'Product_ID',
47+
}),
48+
select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
49+
filter: ['Product_ID', '<', 10],
50+
};
51+
52+
this.ratingDataSource = {
53+
store: new ArrayStore({
54+
data: service.getProducts(),
55+
key: 'Product_ID',
56+
}),
57+
select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
58+
filter: ['Product_ID', '<', 10],
59+
};
60+
}
5861

5962
exportGrids() {
6063
const context = this;

‎apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/Angular/app/app.service.ts‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { Injectable } from '@angular/core';
2+
3+
export interface Product {
4+
Product_ID: number;
5+
6+
Product_Name: string;
7+
8+
Product_Sale_Price: number;
9+
10+
Product_Retail_Price: number;
11+
12+
Product_Consumer_Rating: number;
13+
14+
Product_Category: string;
15+
}
16+
17+
const products: Product[] = [
18+
{
19+
Product_ID: 1,
20+
Product_Name: "HD Video Player",
21+
Product_Sale_Price: 220.00,
22+
Product_Retail_Price: 330.00,
23+
Product_Consumer_Rating: 4,
24+
Product_Category: "Video Players",
25+
},
26+
{
27+
Product_ID: 2,
28+
Product_Name: "SuperHD Video Player",
29+
Product_Sale_Price: 275.00,
30+
Product_Retail_Price: 400.00,
31+
Product_Consumer_Rating: 4,
32+
Product_Category: "Video Players",
33+
},
34+
{
35+
Product_ID: 3,
36+
Product_Name: "SuperPlasma 50",
37+
Product_Sale_Price: 1800.00,
38+
Product_Retail_Price: 2400.00,
39+
Product_Consumer_Rating: 4.5,
40+
Product_Category: "Televisions",
41+
},
42+
{
43+
Product_ID: 4,
44+
Product_Name: "SuperLED 50",
45+
Product_Sale_Price: 1100.00,
46+
Product_Retail_Price: 1600.00,
47+
Product_Consumer_Rating: 5,
48+
Product_Category: "Televisions",
49+
},
50+
{
51+
Product_ID: 5,
52+
Product_Name: "SuperLED 42",
53+
Product_Sale_Price: 1050.00,
54+
Product_Retail_Price: 1450.00,
55+
Product_Consumer_Rating: 5,
56+
Product_Category: "Televisions",
57+
},
58+
{
59+
Product_ID: 6,
60+
Product_Name: "SuperLCD 55",
61+
Product_Sale_Price: 1045.00,
62+
Product_Retail_Price: 1350.00,
63+
Product_Consumer_Rating: 4.5,
64+
Product_Category: "Televisions",
65+
},
66+
{
67+
Product_ID: 7,
68+
Product_Name: "SuperLCD 42",
69+
Product_Sale_Price: 999.00,
70+
Product_Retail_Price: 1200.00,
71+
Product_Consumer_Rating: 4,
72+
Product_Category: "Televisions",
73+
},
74+
{
75+
Product_ID: 8,
76+
Product_Name: "SuperPlasma 65",
77+
Product_Sale_Price: 2900.00,
78+
Product_Retail_Price: 3500.00,
79+
Product_Consumer_Rating: 3,
80+
Product_Category: "Televisions",
81+
},
82+
{
83+
Product_ID: 9,
84+
Product_Name: "SuperLCD 70",
85+
Product_Sale_Price: 3200.00,
86+
Product_Retail_Price: 4000.00,
87+
Product_Consumer_Rating: 4,
88+
Product_Category: "Televisions",
89+
},
90+
];
91+
92+
@Injectable()
93+
export class Service {
94+
getProducts() {
95+
return products;
96+
}
97+
}

‎apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/React/App.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,26 @@ import React, { useCallback, useRef } from 'react';
22
import Button from 'devextreme-react/button';
33
import TabPanel, { Item } from 'devextreme-react/tab-panel';
44
import DataGrid, { Column, DataGridRef } from 'devextreme-react/data-grid';
5+
import { ArrayStore, DataSourceOptions } from 'devextreme-react/common/data';
56
import { Workbook } from 'devextreme-exceljs-fork';
67
import { saveAs } from 'file-saver-es';
78
import { exportDataGrid } from 'devextreme-react/common/export/excel';
9+
import { products } from './data.ts';
810

9-
import 'devextreme-react/common/data';
10-
11-
const priceDataSource = {
12-
store: {
13-
type: 'odata' as const,
14-
version: 2,
15-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
11+
const priceDataSource: DataSourceOptions = {
12+
store: new ArrayStore({
13+
data: products,
1614
key: 'Product_ID',
17-
},
15+
}),
1816
select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
1917
filter: ['Product_ID', '<', 10],
2018
};
21-
const ratingDataSource = {
22-
store: {
23-
type: 'odata' as const,
24-
version: 2,
25-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
19+
20+
const ratingDataSource: DataSourceOptions = {
21+
store: new ArrayStore({
22+
data: products,
2623
key: 'Product_ID',
27-
},
24+
}),
2825
select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
2926
filter: ['Product_ID', '<', 10],
3027
};

‎apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/React/data.ts‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
export interface Product {
2+
Product_ID: number;
3+
4+
Product_Name: string;
5+
6+
Product_Sale_Price: number;
7+
8+
Product_Retail_Price: number;
9+
10+
Product_Consumer_Rating: number;
11+
12+
Product_Category: string;
13+
}
14+
15+
export const products: Product[] = [
16+
{
17+
Product_ID: 1,
18+
Product_Name: "HD Video Player",
19+
Product_Sale_Price: 220.00,
20+
Product_Retail_Price: 330.00,
21+
Product_Consumer_Rating: 4,
22+
Product_Category: "Video Players",
23+
},
24+
{
25+
Product_ID: 2,
26+
Product_Name: "SuperHD Video Player",
27+
Product_Sale_Price: 275.00,
28+
Product_Retail_Price: 400.00,
29+
Product_Consumer_Rating: 4,
30+
Product_Category: "Video Players",
31+
},
32+
{
33+
Product_ID: 3,
34+
Product_Name: "SuperPlasma 50",
35+
Product_Sale_Price: 1800.00,
36+
Product_Retail_Price: 2400.00,
37+
Product_Consumer_Rating: 4.5,
38+
Product_Category: "Televisions",
39+
},
40+
{
41+
Product_ID: 4,
42+
Product_Name: "SuperLED 50",
43+
Product_Sale_Price: 1100.00,
44+
Product_Retail_Price: 1600.00,
45+
Product_Consumer_Rating: 5,
46+
Product_Category: "Televisions",
47+
},
48+
{
49+
Product_ID: 5,
50+
Product_Name: "SuperLED 42",
51+
Product_Sale_Price: 1050.00,
52+
Product_Retail_Price: 1450.00,
53+
Product_Consumer_Rating: 5,
54+
Product_Category: "Televisions",
55+
},
56+
{
57+
Product_ID: 6,
58+
Product_Name: "SuperLCD 55",
59+
Product_Sale_Price: 1045.00,
60+
Product_Retail_Price: 1350.00,
61+
Product_Consumer_Rating: 4.5,
62+
Product_Category: "Televisions",
63+
},
64+
{
65+
Product_ID: 7,
66+
Product_Name: "SuperLCD 42",
67+
Product_Sale_Price: 999.00,
68+
Product_Retail_Price: 1200.00,
69+
Product_Consumer_Rating: 4,
70+
Product_Category: "Televisions",
71+
},
72+
{
73+
Product_ID: 8,
74+
Product_Name: "SuperPlasma 65",
75+
Product_Sale_Price: 2900.00,
76+
Product_Retail_Price: 3500.00,
77+
Product_Consumer_Rating: 3,
78+
Product_Category: "Televisions",
79+
},
80+
{
81+
Product_ID: 9,
82+
Product_Name: "SuperLCD 70",
83+
Product_Sale_Price: 3200.00,
84+
Product_Retail_Price: 4000.00,
85+
Product_Consumer_Rating: 4,
86+
Product_Category: "Televisions",
87+
},
88+
];

‎apps/demos/Demos/DataGrid/ExcelJSExportMultipleGrids/ReactJs/App.js‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,25 @@ import React, { useCallback, useRef } from 'react';
22
import Button from 'devextreme-react/button';
33
import TabPanel, { Item } from 'devextreme-react/tab-panel';
44
import DataGrid, { Column } from 'devextreme-react/data-grid';
5+
import { ArrayStore } from 'devextreme-react/common/data';
56
import { Workbook } from 'devextreme-exceljs-fork';
67
import { saveAs } from 'file-saver-es';
78
import { exportDataGrid } from 'devextreme-react/common/export/excel';
8-
import 'devextreme-react/common/data';
9+
import { products } from './data.js';
910

1011
const priceDataSource = {
11-
store: {
12-
type: 'odata',
13-
version: 2,
14-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
12+
store: new ArrayStore({
13+
data: products,
1514
key: 'Product_ID',
16-
},
15+
}),
1716
select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
1817
filter: ['Product_ID', '<', 10],
1918
};
2019
const ratingDataSource = {
21-
store: {
22-
type: 'odata',
23-
version: 2,
24-
url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
20+
store: new ArrayStore({
21+
data: products,
2522
key: 'Product_ID',
26-
},
23+
}),
2724
select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
2825
filter: ['Product_ID', '<', 10],
2926
};

0 commit comments

Comments
 (0)