Skip to content

Commit 4cf0ec4

Browse files
tongsonbarbstongsonbarbs
committed
initial commit
1 parent a342d6b commit 4cf0ec4

21 files changed

+1115
-0
lines changed

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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<dx-card-view id="cardview" [dataSource]="employees" keyExpr="ID">
2+
<dxo-card-cover [imageExpr]="imageExpr" altExpr="FullName"> </dxo-card-cover>
3+
4+
<dxi-column [calculateCellValue]="calculateFullName" caption="Full Name"></dxi-column>
5+
<dxi-column dataField="Prefix"></dxi-column>
6+
<dxi-column dataField="Position"></dxi-column>
7+
<dxi-column dataField="BirthDate"></dxi-column>
8+
<dxi-column dataField="HireDate"></dxi-column>
9+
<dxi-column dataField="Address"></dxi-column>
10+
11+
<dxo-pager
12+
[allowedPageSizes]="[5, 8, 15, 30]"
13+
[showInfo]="true"
14+
[showNavigationButtons]="true"
15+
[showPageSizeSelector]="true"
16+
[visible]="true"
17+
>
18+
</dxo-pager>
19+
20+
<dxo-paging [pageSize]="5"></dxo-paging>
21+
</dx-card-view>

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

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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 { Employee, Service } from "./app.service";
6+
7+
if (!document.location.host.includes("localhost")) {
8+
enableProdMode();
9+
}
10+
11+
@Component({
12+
selector: "demo-app",
13+
templateUrl: "./app.component.html",
14+
providers: [Service],
15+
})
16+
export class AppComponent {
17+
employees: Employee[];
18+
19+
calculateFullName(data: any): string {
20+
return `${data.FirstName} ${data.LastName}`;
21+
}
22+
23+
imageExpr = (data: Employee) => `https://js.devexpress.com/jQuery/Demos/WidgetsGallery/JSDemos/${data.Picture}`;
24+
25+
constructor(service: Service) {
26+
this.employees = service.getEmployees();
27+
}
28+
}
29+
30+
@NgModule({
31+
imports: [BrowserModule, DxCardViewModule],
32+
declarations: [AppComponent],
33+
bootstrap: [AppComponent],
34+
})
35+
export class AppModule {}
36+
37+
platformBrowserDynamic().bootstrapModule(AppModule);

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

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import { Injectable } from '@angular/core';
2+
3+
export class Employee {
4+
ID: number;
5+
6+
FirstName: string;
7+
8+
LastName: string;
9+
10+
Prefix: string;
11+
12+
Position: string;
13+
14+
Picture: string;
15+
16+
BirthDate: string;
17+
18+
HireDate: string;
19+
20+
Notes: string;
21+
22+
Address: string;
23+
24+
State: string;
25+
26+
City: string;
27+
}
28+
29+
const employees: Employee[] = [{
30+
ID: 1,
31+
FirstName: 'John',
32+
LastName: 'Heart',
33+
Prefix: 'Mr.',
34+
Position: 'CEO',
35+
Picture: 'images/employees/01.png',
36+
BirthDate: '1964/03/16',
37+
HireDate: '1995/01/15',
38+
Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
39+
Address: '351 S Hill St.',
40+
State: 'California',
41+
City: 'Los Angeles',
42+
}, {
43+
ID: 2,
44+
FirstName: 'Olivia',
45+
LastName: 'Peyton',
46+
Prefix: 'Mrs.',
47+
Position: 'Sales Assistant',
48+
Picture: 'images/employees/09.png',
49+
BirthDate: '1981/06/03',
50+
HireDate: '2012/05/14',
51+
Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
52+
Address: '807 W Paseo Del Mar',
53+
State: 'California',
54+
City: 'Los Angeles',
55+
}, {
56+
ID: 3,
57+
FirstName: 'Robert',
58+
LastName: 'Reagan',
59+
Prefix: 'Mr.',
60+
Position: 'CMO',
61+
Picture: 'images/employees/03.png',
62+
BirthDate: '1974/09/07',
63+
HireDate: '2002/11/08',
64+
Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
65+
Address: '4 Westmoreland Pl.',
66+
State: 'Arkansas',
67+
City: 'Bentonville',
68+
}, {
69+
ID: 4,
70+
FirstName: 'Greta',
71+
LastName: 'Sims',
72+
Prefix: 'Ms.',
73+
Position: 'HR Manager',
74+
Picture: 'images/employees/04.png',
75+
BirthDate: '1977/11/22',
76+
HireDate: '1998/04/23',
77+
Notes: 'Greta has been DevAV\'s HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.',
78+
Address: '1700 S Grandview Dr.',
79+
State: 'Georgia',
80+
City: 'Atlanta',
81+
}, {
82+
ID: 5,
83+
FirstName: 'Brett',
84+
LastName: 'Wade',
85+
Prefix: 'Mr.',
86+
Position: 'IT Manager',
87+
Picture: 'images/employees/05.png',
88+
BirthDate: '1968/12/01',
89+
HireDate: '2009/03/06',
90+
Notes: 'Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).',
91+
Address: '1120 Old Mill Rd.',
92+
State: 'Idaho',
93+
City: 'Boise',
94+
}, {
95+
ID: 6,
96+
FirstName: 'Sandra',
97+
LastName: 'Johnson',
98+
Prefix: 'Mrs.',
99+
Position: 'Controller',
100+
Picture: 'images/employees/06.png',
101+
BirthDate: '1974/11/15',
102+
HireDate: '2005/05/11',
103+
Notes: 'Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you\'ve not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.',
104+
Address: '4600 N Virginia Rd.',
105+
State: 'Utah',
106+
City: 'Beaver',
107+
}, {
108+
ID: 7,
109+
FirstName: 'Kevin',
110+
LastName: 'Carter',
111+
Prefix: 'Mr.',
112+
Position: 'Shipping Manager',
113+
Picture: 'images/employees/07.png',
114+
BirthDate: '1978/01/09',
115+
HireDate: '2009/08/11',
116+
Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
117+
Address: '424 N Main St.',
118+
State: 'California',
119+
City: 'San Diego',
120+
}, {
121+
ID: 8,
122+
FirstName: 'Cynthia',
123+
LastName: 'Stanwick',
124+
Prefix: 'Ms.',
125+
Position: 'HR Assistant',
126+
Picture: 'images/employees/08.png',
127+
BirthDate: '1985/06/05',
128+
HireDate: '2008/03/24',
129+
Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
130+
Address: '2211 Bonita Dr.',
131+
State: 'Arkansas',
132+
City: 'Little Rock',
133+
}, {
134+
ID: 9,
135+
FirstName: 'Kent',
136+
LastName: 'Samuelson',
137+
Prefix: 'Dr.',
138+
Position: 'Ombudsman',
139+
Picture: 'images/employees/02.png',
140+
BirthDate: '1972/09/11',
141+
HireDate: '2009/04/22',
142+
Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra.',
143+
Address: '12100 Mora Dr',
144+
State: 'Missouri',
145+
City: 'St. Louis',
146+
}, {
147+
ID: 10,
148+
FirstName: 'Taylor',
149+
LastName: 'Riley',
150+
Prefix: 'Mr.',
151+
Position: 'Network Admin',
152+
Picture: '',
153+
BirthDate: '1982/08/14',
154+
HireDate: '2012/04/14',
155+
Notes: 'If you are like the rest of us at DevAV, then you\'ve probably reached out for help from Taylor. He does a great job as a member of our IT department.',
156+
Address: '7776 Torreyson Dr',
157+
State: 'California',
158+
City: 'San Jose',
159+
}];
160+
161+
@Injectable()
162+
export class Service {
163+
getEmployees() {
164+
return employees;
165+
}
166+
}

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

+26
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/dist/zone.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/Adaptability/React/App.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from "react";
2+
import "devextreme/dist/css/dx.fluent.blue.light.css";
3+
import { CardView, Paging } from "devextreme-react/card-view";
4+
import { employees } from "./data";
5+
6+
const App = () => {
7+
const calculateFullName = (data) => `${data.FirstName} ${data.LastName}`;
8+
const imageExpr = (data) => `https://js.devexpress.com/jQuery/Demos/WidgetsGallery/JSDemos/${data.Picture}`;
9+
10+
return (
11+
<CardView
12+
id="cardview"
13+
dataSource={employees}
14+
keyExpr="ID"
15+
columns={[
16+
{ dataField: "Full Name", calculateCellValue: calculateFullName },
17+
{ dataField: "Prefix" },
18+
{ dataField: "Position" },
19+
{ dataField: "BirthDate" },
20+
{ dataField: "HireDate" },
21+
{ dataField: "Address" }
22+
]}
23+
cardCover={{ imageExpr, altExpr: "FullName" }}
24+
pager={{
25+
allowedPageSizes: [5, 8, 15, 30],
26+
showInfo: true,
27+
showNavigationButtons: true,
28+
showPageSizeSelector: true,
29+
visible: true
30+
}}
31+
>
32+
<Paging pageSize={5} />
33+
</CardView>
34+
);
35+
};
36+
37+
export default App;

0 commit comments

Comments
 (0)