Skip to content

Commit 3df9972

Browse files
pomahtripomahtri
authored
CardView - demos - Simple Array (DevExpress#29917)
1 parent deaea07 commit 3df9972

File tree

309 files changed

+12244
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

309 files changed

+12244
-1
lines changed

‎apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<dx-card-view id="cardView" [dataSource]="customers" keyExpr="ID">
2+
<dxi-card-view-column
3+
*ngFor="let column of columns"
4+
[dataField]="column"
5+
></dxi-card-view-column>
6+
</dx-card-view>

‎apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { NgModule, Component, enableProdMode } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
4+
import { DxCardViewModule } from 'devextreme-angular';
5+
import { Customer, Service } from './app.service';
6+
7+
if (!/localhost/.test(document.location.host)) {
8+
enableProdMode();
9+
}
10+
11+
let modulePrefix = '';
12+
// @ts-ignore
13+
if (window && window.config?.packageConfigPaths) {
14+
modulePrefix = '/app';
15+
}
16+
17+
@Component({
18+
selector: 'demo-app',
19+
templateUrl: `.${modulePrefix}/app.component.html`,
20+
providers: [Service],
21+
})
22+
export class AppComponent {
23+
customers: Customer[];
24+
25+
columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
26+
27+
constructor(service: Service) {
28+
this.customers = service.getCustomers();
29+
}
30+
}
31+
32+
@NgModule({
33+
imports: [
34+
BrowserModule,
35+
DxCardViewModule,
36+
],
37+
declarations: [AppComponent],
38+
bootstrap: [AppComponent],
39+
})
40+
export class AppModule { }
41+
42+
platformBrowserDynamic().bootstrapModule(AppModule);

‎apps/demos/Demos/CardView/CardTemplate/Angular/app/app.service.ts‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import { Injectable } from '@angular/core';
2+
3+
export interface Customer {
4+
ID: number;
5+
CompanyName: string;
6+
Address: string;
7+
City: string;
8+
State: string;
9+
Zipcode: number;
10+
Phone: string;
11+
Fax: string;
12+
}
13+
14+
const customers: Customer[] = [{
15+
ID: 1,
16+
CompanyName: 'Super Mart of the West',
17+
Address: '702 SW 8th Street',
18+
City: 'Bentonville',
19+
State: 'Arkansas',
20+
Zipcode: 72716,
21+
Phone: '(800) 555-2797',
22+
Fax: '(800) 555-2171',
23+
}, {
24+
ID: 2,
25+
CompanyName: 'Electronics Depot',
26+
Address: '2455 Paces Ferry Road NW',
27+
City: 'Atlanta',
28+
State: 'Georgia',
29+
Zipcode: 30339,
30+
Phone: '(800) 595-3232',
31+
Fax: '(800) 595-3231',
32+
}, {
33+
ID: 3,
34+
CompanyName: 'K&S Music',
35+
Address: '1000 Nicllet Mall',
36+
City: 'Minneapolis',
37+
State: 'Minnesota',
38+
Zipcode: 55403,
39+
Phone: '(612) 304-6073',
40+
Fax: '(612) 304-6074',
41+
}, {
42+
ID: 4,
43+
CompanyName: "Tom's Club",
44+
Address: '999 Lake Drive',
45+
City: 'Issaquah',
46+
State: 'Washington',
47+
Zipcode: 98027,
48+
Phone: '(800) 955-2292',
49+
Fax: '(800) 955-2293',
50+
}, {
51+
ID: 5,
52+
CompanyName: 'E-Mart',
53+
Address: '3333 Beverly Rd',
54+
City: 'Hoffman Estates',
55+
State: 'Illinois',
56+
Zipcode: 60179,
57+
Phone: '(847) 286-2500',
58+
Fax: '(847) 286-2501',
59+
}, {
60+
ID: 6,
61+
CompanyName: 'Walters',
62+
Address: '200 Wilmot Rd',
63+
City: 'Deerfield',
64+
State: 'Illinois',
65+
Zipcode: 60015,
66+
Phone: '(847) 940-2500',
67+
Fax: '(847) 940-2501',
68+
}, {
69+
ID: 7,
70+
CompanyName: 'StereoShack',
71+
Address: '400 Commerce S',
72+
City: 'Fort Worth',
73+
State: 'Texas',
74+
Zipcode: 76102,
75+
Phone: '(817) 820-0741',
76+
Fax: '(817) 820-0742',
77+
}, {
78+
ID: 8,
79+
CompanyName: 'Circuit Town',
80+
Address: '2200 Kensington Court',
81+
City: 'Oak Brook',
82+
State: 'Illinois',
83+
Zipcode: 60523,
84+
Phone: '(800) 955-2929',
85+
Fax: '(800) 955-9392',
86+
}, {
87+
ID: 9,
88+
CompanyName: 'Premier Buy',
89+
Address: '7601 Penn Avenue South',
90+
City: 'Richfield',
91+
State: 'Minnesota',
92+
Zipcode: 55423,
93+
Phone: '(612) 291-1000',
94+
Fax: '(612) 291-2001',
95+
}, {
96+
ID: 10,
97+
CompanyName: 'ElectrixMax',
98+
Address: '263 Shuman Blvd',
99+
City: 'Naperville',
100+
State: 'Illinois',
101+
Zipcode: 60563,
102+
Phone: '(630) 438-7800',
103+
Fax: '(630) 438-7801',
104+
}, {
105+
ID: 11,
106+
CompanyName: 'Video Emporium',
107+
Address: '1201 Elm Street',
108+
City: 'Dallas',
109+
State: 'Texas',
110+
Zipcode: 75270,
111+
Phone: '(214) 854-3000',
112+
Fax: '(214) 854-3001',
113+
}, {
114+
ID: 12,
115+
CompanyName: 'Screen Shop',
116+
Address: '1000 Lowes Blvd',
117+
City: 'Mooresville',
118+
State: 'North Carolina',
119+
Zipcode: 28117,
120+
Phone: '(800) 445-6937',
121+
Fax: '(800) 445-6938',
122+
}];
123+
124+
@Injectable()
125+
export class Service {
126+
getCustomers() {
127+
return customers;
128+
}
129+
}

‎apps/demos/Demos/CardView/CardTemplate/Angular/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
3+
<head>
4+
<title>DevExtreme Demo</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
8+
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
9+
10+
<script src="../../../../node_modules/core-js/client/shim.min.js"></script>
11+
<script src="../../../../node_modules/zone.js/bundles/zone.umd.js"></script>
12+
<script src="../../../../node_modules/reflect-metadata/Reflect.js"></script>
13+
<script src="../../../../node_modules/systemjs/dist/system.js"></script>
14+
15+
<script src="config.js"></script>
16+
<script>
17+
System.import("app").catch(console.error.bind(console));
18+
</script>
19+
</head>
20+
21+
<body class="dx-viewport">
22+
<div class="demo-container">
23+
<demo-app>Loading...</demo-app>
24+
</div>
25+
</body>
26+
</html>

‎apps/demos/Demos/CardView/CardTemplate/React/App.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import CardView, { Column } from 'devextreme-react/card-view';
3+
import { customers } from './data.ts';
4+
5+
const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
6+
7+
const App = () => (
8+
<CardView
9+
dataSource={customers}
10+
keyExpr="ID"
11+
>
12+
{ columns.map((column, index) => <Column dataField={column} key={index} />) }
13+
</CardView>
14+
);
15+
16+
export default App;

‎apps/demos/Demos/CardView/CardTemplate/React/data.ts‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
export interface Customer {
2+
ID: number;
3+
CompanyName: string;
4+
Address: string;
5+
City: string;
6+
State: string;
7+
Zipcode: number;
8+
Phone: string;
9+
Fax: string;
10+
}
11+
12+
export const customers: Customer[] = [{
13+
ID: 1,
14+
CompanyName: 'Super Mart of the West',
15+
Address: '702 SW 8th Street',
16+
City: 'Bentonville',
17+
State: 'Arkansas',
18+
Zipcode: 72716,
19+
Phone: '(800) 555-2797',
20+
Fax: '(800) 555-2171',
21+
}, {
22+
ID: 2,
23+
CompanyName: 'Electronics Depot',
24+
Address: '2455 Paces Ferry Road NW',
25+
City: 'Atlanta',
26+
State: 'Georgia',
27+
Zipcode: 30339,
28+
Phone: '(800) 595-3232',
29+
Fax: '(800) 595-3231',
30+
}, {
31+
ID: 3,
32+
CompanyName: 'K&S Music',
33+
Address: '1000 Nicllet Mall',
34+
City: 'Minneapolis',
35+
State: 'Minnesota',
36+
Zipcode: 55403,
37+
Phone: '(612) 304-6073',
38+
Fax: '(612) 304-6074',
39+
}, {
40+
ID: 4,
41+
CompanyName: "Tom's Club",
42+
Address: '999 Lake Drive',
43+
City: 'Issaquah',
44+
State: 'Washington',
45+
Zipcode: 98027,
46+
Phone: '(800) 955-2292',
47+
Fax: '(800) 955-2293',
48+
}, {
49+
ID: 5,
50+
CompanyName: 'E-Mart',
51+
Address: '3333 Beverly Rd',
52+
City: 'Hoffman Estates',
53+
State: 'Illinois',
54+
Zipcode: 60179,
55+
Phone: '(847) 286-2500',
56+
Fax: '(847) 286-2501',
57+
}, {
58+
ID: 6,
59+
CompanyName: 'Walters',
60+
Address: '200 Wilmot Rd',
61+
City: 'Deerfield',
62+
State: 'Illinois',
63+
Zipcode: 60015,
64+
Phone: '(847) 940-2500',
65+
Fax: '(847) 940-2501',
66+
}, {
67+
ID: 7,
68+
CompanyName: 'StereoShack',
69+
Address: '400 Commerce S',
70+
City: 'Fort Worth',
71+
State: 'Texas',
72+
Zipcode: 76102,
73+
Phone: '(817) 820-0741',
74+
Fax: '(817) 820-0742',
75+
}, {
76+
ID: 8,
77+
CompanyName: 'Circuit Town',
78+
Address: '2200 Kensington Court',
79+
City: 'Oak Brook',
80+
State: 'Illinois',
81+
Zipcode: 60523,
82+
Phone: '(800) 955-2929',
83+
Fax: '(800) 955-9392',
84+
}, {
85+
ID: 9,
86+
CompanyName: 'Premier Buy',
87+
Address: '7601 Penn Avenue South',
88+
City: 'Richfield',
89+
State: 'Minnesota',
90+
Zipcode: 55423,
91+
Phone: '(612) 291-1000',
92+
Fax: '(612) 291-2001',
93+
}, {
94+
ID: 10,
95+
CompanyName: 'ElectrixMax',
96+
Address: '263 Shuman Blvd',
97+
City: 'Naperville',
98+
State: 'Illinois',
99+
Zipcode: 60563,
100+
Phone: '(630) 438-7800',
101+
Fax: '(630) 438-7801',
102+
}, {
103+
ID: 11,
104+
CompanyName: 'Video Emporium',
105+
Address: '1201 Elm Street',
106+
City: 'Dallas',
107+
State: 'Texas',
108+
Zipcode: 75270,
109+
Phone: '(214) 854-3000',
110+
Fax: '(214) 854-3001',
111+
}, {
112+
ID: 12,
113+
CompanyName: 'Screen Shop',
114+
Address: '1000 Lowes Blvd',
115+
City: 'Mooresville',
116+
State: 'North Carolina',
117+
Zipcode: 28117,
118+
Phone: '(800) 445-6937',
119+
Fax: '(800) 445-6938',
120+
}];

‎apps/demos/Demos/CardView/CardTemplate/React/index.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>DevExtreme Demo</title>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
8+
<link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
9+
10+
<script src="../../../../node_modules/core-js/client/shim.min.js"></script>
11+
<script src="../../../../node_modules/systemjs/dist/system.js"></script>
12+
<script type="text/javascript" src="config.js"></script>
13+
<script type="text/javascript">
14+
System.import("./index.tsx");
15+
</script>
16+
</head>
17+
18+
<body class="dx-viewport">
19+
<div class="demo-container">
20+
<div id="app"></div>
21+
</div>
22+
</body>
23+
</html>

‎apps/demos/Demos/CardView/CardTemplate/React/index.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
import App from './App.tsx';
5+
6+
ReactDOM.render(
7+
<App />,
8+
document.getElementById('app'),
9+
);

‎apps/demos/Demos/CardView/CardTemplate/ReactJs/App.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import CardView, { Column } from 'devextreme-react/card-view';
3+
import { customers } from './data.js';
4+
5+
const columns = ['CompanyName', 'City', 'State', 'Phone', 'Fax'];
6+
const App = () => (
7+
<CardView
8+
dataSource={customers}
9+
keyExpr="ID"
10+
>
11+
{columns.map((column, index) => (
12+
<Column
13+
dataField={column}
14+
key={index}
15+
/>
16+
))}
17+
</CardView>
18+
);
19+
export default App;

0 commit comments

Comments
 (0)