Skip to content

Commit ed2a0fd

Browse files
agoldenbaumagoldenbaum
authored
Implement missing grid samples (#377)
1 parent 78bb5e5 commit ed2a0fd

Some content is hidden

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

41 files changed

+17681
-0
lines changed

‎samples/grids/grid/column-data-types/.prettierrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"printWidth": 250,
3+
"tabWidth": 4,
4+
"useTabs": false,
5+
"semi": true,
6+
"singleQuote": false,
7+
"trailingComma": "none",
8+
"bracketSpacing": true,
9+
"jsxBracketSameLine": false,
10+
"fluid": false
11+
}

‎samples/grids/grid/column-data-types/index.html

+134
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Sample | Ignite UI | Web Components | infragistics</title>
5+
<meta charset="UTF-8" />
6+
7+
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
11+
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
12+
<link rel="stylesheet" href="/src/index.css" type="text/css" />
13+
14+
</head>
15+
16+
<body>
17+
<div id="root">
18+
19+
<div class="container sample">
20+
21+
22+
23+
<div class="container fill">
24+
<igc-grid
25+
auto-generate="false"
26+
id="grid"
27+
locale="EN"
28+
allow-filtering="true"
29+
filter-mode="excelStyleFilter"
30+
display-density="compact"
31+
name="grid"
32+
id ="grid">
33+
<igc-column
34+
field="ProductName"
35+
header="Prod. Name"
36+
sortable="true"
37+
editable="true"
38+
resizable="true"
39+
has-summary="true"
40+
width="120px"
41+
data-type="string">
42+
</igc-column>
43+
<igc-column
44+
field="UnitPrice"
45+
header="Unit Price"
46+
width="120px"
47+
sortable="true"
48+
has-summary="true"
49+
editable="true"
50+
resizable="true"
51+
data-type="number"
52+
name="column1"
53+
id ="column1">
54+
</igc-column>
55+
<igc-column
56+
field="OrderFullDate"
57+
header="Order Full Date"
58+
width="300px"
59+
sortable="true"
60+
has-summary="true"
61+
editable="true"
62+
resizable="true"
63+
data-type="dateTime"
64+
name="column2"
65+
id ="column2">
66+
</igc-column>
67+
<igc-column
68+
field="OrderDate"
69+
header="Order Date"
70+
width="160px"
71+
sortable="true"
72+
has-summary="true"
73+
editable="true"
74+
resizable="true"
75+
data-type="date"
76+
name="column3"
77+
id ="column3">
78+
</igc-column>
79+
<igc-column
80+
field="OrderDateDelay"
81+
header="Order Time"
82+
width="120px"
83+
sortable="true"
84+
has-summary="true"
85+
editable="true"
86+
resizable="true"
87+
data-type="time"
88+
name="column4"
89+
id ="column4">
90+
</igc-column>
91+
<igc-column
92+
field="UnitsInStock"
93+
header="Stock Value"
94+
width="120px"
95+
sortable="true"
96+
has-summary="true"
97+
editable="true"
98+
resizable="true"
99+
data-type="currency"
100+
name="column5"
101+
id ="column5">
102+
</igc-column>
103+
<igc-column
104+
field="UnitsOnOrder"
105+
header="% Change"
106+
width="120px"
107+
sortable="true"
108+
has-summary="true"
109+
editable="true"
110+
resizable="true"
111+
data-type="percent"
112+
name="column6"
113+
id ="column6">
114+
</igc-column>
115+
<igc-column
116+
field="Discontinued"
117+
header="Discontinued"
118+
width="160px"
119+
sortable="true"
120+
has-summary="true"
121+
editable="true"
122+
resizable="true"
123+
data-type="boolean">
124+
</igc-column>
125+
</igc-grid>
126+
</div>
127+
</div>
128+
129+
</div>
130+
131+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
132+
<% if (false) { %><script src="src/index.ts"></script><% } %>
133+
</body>
134+
</html>

‎samples/grids/grid/column-data-types/package.json

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"name": "example-ignite-ui-web-components",
3+
"description": "This project provides example of using Ignite UI for Web Components",
4+
"author": "Infragistics",
5+
"version": "1.0.0",
6+
"license": "",
7+
"private": true,
8+
"homepage": ".",
9+
"main": "src/index.ts",
10+
"scripts": {
11+
"build": "npm run build:prod",
12+
"build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
13+
"build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
14+
"serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=false --mode development --config ./webpack.config.js --hot --inline --progress --watch --open",
15+
"serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --watch --open --content-base dist/",
16+
"start": "npm run serve:dev",
17+
"build:legacy": "npm run build:prod:legacy",
18+
"build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
19+
"build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
20+
"serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --inline --progress --watch --open",
21+
"serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --inline --progress --watch --open --content-base dist/",
22+
"start:legacy": "npm run serve:dev:legacy"
23+
},
24+
"dependencies": {
25+
"igniteui-webcomponents-core": "4.0.4",
26+
"igniteui-webcomponents-grids": "4.0.4",
27+
"igniteui-webcomponents-inputs": "4.0.4",
28+
"igniteui-webcomponents-layouts": "4.0.4",
29+
"@webcomponents/custom-elements": "^1.4.1",
30+
"@webcomponents/template": "^1.4.2",
31+
"babel-runtime": "^6.26.0",
32+
"core-js": "^3.6.5",
33+
"lit-html": "^2.2.0",
34+
"tslib": "^2.0.0"
35+
},
36+
"devDependencies": {
37+
"@babel/cli": "^7.8.3",
38+
"@babel/core": "^7.8.3",
39+
"@babel/plugin-proposal-class-properties": "^7.8.3",
40+
"@babel/plugin-transform-runtime": "^7.10.0",
41+
"@babel/preset-env": "^7.8.3",
42+
"@babel/preset-typescript": "^7.8.3",
43+
"@types/source-map": "^0.5.7",
44+
"babel-loader": "^8.1.0",
45+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
46+
"fork-ts-checker-webpack-plugin": "^4.1.5",
47+
"tsconfig-paths-webpack-plugin": "^4.0.0",
48+
"html-webpack-plugin": "^4.3.0",
49+
"source-map": "^0.7.3",
50+
"typescript": "^4.4.4",
51+
"webpack": "^5.74.0",
52+
"webpack-cli": "^3.3.11",
53+
"webpack-dev-server": "^3.11.0",
54+
"parcel-bundler": "^1.6.1",
55+
"css-loader": "^1.0.0",
56+
"csv-loader": "^3.0.2",
57+
"file-loader": "^4.2.0",
58+
"style-loader": "^0.22.1",
59+
"xml-loader": "^1.2.1",
60+
"worker-loader": "^3.0.8"
61+
}
62+
}

‎samples/grids/grid/column-data-types/sandbox.config.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser",
5+
"template": "parcel"
6+
}
7+

‎samples/grids/grid/column-data-types/src/InvoicesDataExtendedDates.ts

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
//begin data
2+
export class InvoicesDataExtendedDates extends Array<Invoice>
3+
{
4+
public constructor() {
5+
super();
6+
this.push(new Invoice(
7+
{
8+
ProductID : 1,
9+
ProductName : "Chai",
10+
SupplierID : 1,
11+
CategoryID : 1,
12+
QuantityPerUnit : "10 boxes x 20 bags",
13+
UnitPrice: 18.0000,
14+
UnitsInStock: 39,
15+
UnitsOnOrder: 0.030,
16+
ReorderLevel: 10,
17+
Discontinued: false,
18+
OrderDate: new Date("2012-02-12"),
19+
OrderDateDelay: new Date("2012-02-12"),
20+
OrderFullDate: new Date("2012-02-12")
21+
}));
22+
this.push(new Invoice(
23+
{
24+
ProductID: 2,
25+
ProductName: "Chang",
26+
SupplierID: 1,
27+
CategoryID: 1,
28+
QuantityPerUnit: "24 - 12 oz bottles",
29+
UnitPrice: 19.0000,
30+
UnitsInStock: 17,
31+
UnitsOnOrder: 0.040,
32+
ReorderLevel: 25,
33+
Discontinued: true,
34+
OrderDate: new Date("2003-03-17"),
35+
OrderDateDelay: new Date("2003-03-17"),
36+
OrderFullDate: new Date("2003-03-17")
37+
}));
38+
this.push(new Invoice(
39+
{
40+
ProductID: 3,
41+
ProductName: "Aniseed Syrup",
42+
SupplierID: 1,
43+
CategoryID: 2,
44+
QuantityPerUnit: "12 - 550 ml bottles",
45+
UnitPrice: 10.0000,
46+
UnitsInStock: 13,
47+
UnitsOnOrder: 0.070,
48+
ReorderLevel: 25,
49+
Discontinued: false,
50+
OrderDate: new Date("2006-03-17"),
51+
OrderDateDelay: new Date("2006-03-17"),
52+
OrderFullDate: new Date("2006-03-17")
53+
}));
54+
this.push(new Invoice(
55+
{
56+
ProductID: 4,
57+
ProductName: "Chef Antons Cajun Seasoning",
58+
SupplierID: 2,
59+
CategoryID: 2,
60+
QuantityPerUnit: "48 - 6 oz jars",
61+
UnitPrice: 22.0000,
62+
UnitsInStock: 53,
63+
UnitsOnOrder: 0.030,
64+
ReorderLevel: 0,
65+
Discontinued: false,
66+
OrderDate: new Date("2016-03-17"),
67+
OrderDateDelay: new Date("2016-03-17"),
68+
OrderFullDate: new Date("2016-03-17")
69+
}));
70+
this.push(new Invoice(
71+
{
72+
ProductID: 5,
73+
ProductName: "Chef Antons Gumbo Mix",
74+
SupplierID: 2,
75+
CategoryID: 2,
76+
QuantityPerUnit: "36 boxes",
77+
UnitPrice: 21.3500,
78+
UnitsInStock: 0,
79+
UnitsOnOrder: 0.030,
80+
ReorderLevel: 0,
81+
Discontinued: true,
82+
OrderDate: new Date("2011-11-11"),
83+
OrderDateDelay: new Date("2011-11-11"),
84+
OrderFullDate: new Date("2011-11-11")
85+
}));
86+
this.push(new Invoice(
87+
{
88+
ProductID: 6,
89+
ProductName: "Grandmas Boysenberry Spread",
90+
SupplierID: 3,
91+
CategoryID: 2,
92+
QuantityPerUnit: "12 - 8 oz jars",
93+
UnitPrice: 25.0000,
94+
UnitsInStock: 0,
95+
UnitsOnOrder: 0.030,
96+
ReorderLevel: 25,
97+
Discontinued: false,
98+
OrderDate: new Date("2017-12-17"),
99+
OrderDateDelay: new Date("2017-12-17"),
100+
OrderFullDate: new Date("2017-12-17")
101+
}));
102+
this.push(new Invoice(
103+
{
104+
ProductID: 7,
105+
ProductName: "Uncle Bobs Organic Dried Pears",
106+
SupplierID: 3,
107+
CategoryID: 7,
108+
QuantityPerUnit: "12 - 1 lb pkgs.",
109+
UnitPrice: 30.0000,
110+
UnitsInStock: 150,
111+
UnitsOnOrder: 0.030,
112+
ReorderLevel: 10,
113+
Discontinued: false,
114+
OrderDate: new Date("2016-07-17"),
115+
OrderDateDelay: new Date("2016-07-17"),
116+
OrderFullDate: new Date("2016-07-17")
117+
}));
118+
this.push(new Invoice(
119+
{
120+
ProductID: 8,
121+
ProductName: "Northwoods Cranberry Sauce",
122+
SupplierID: 3,
123+
CategoryID: 2,
124+
QuantityPerUnit: "12 - 12 oz jars",
125+
UnitPrice: 40.0000,
126+
UnitsInStock: 6,
127+
UnitsOnOrder: 0.030,
128+
ReorderLevel: 0,
129+
Discontinued: false,
130+
OrderDate: new Date("2018-01-17"),
131+
OrderDateDelay: new Date("2018-01-17"),
132+
OrderFullDate: new Date("2018-01-17")
133+
}));
134+
this.push(new Invoice(
135+
{
136+
ProductID: 9,
137+
ProductName: "Mishi Kobe Niku",
138+
SupplierID: 4,
139+
CategoryID: 6,
140+
QuantityPerUnit: "18 - 500 g pkgs.",
141+
UnitPrice: 97.0000,
142+
UnitsInStock: 29,
143+
UnitsOnOrder: 0.030,
144+
ReorderLevel: 0,
145+
Discontinued: true,
146+
OrderDate: new Date("2010-02-17"),
147+
OrderDateDelay: new Date("2010-02-17"),
148+
OrderFullDate: new Date("2010-02-17")
149+
}));
150+
}
151+
152+
}
153+
154+
export class Invoice
155+
{
156+
public constructor(init: Partial<Invoice>) {
157+
Object.assign(this, init);
158+
}
159+
public ProductID: number;
160+
public ProductName: string;
161+
public SupplierID: number;
162+
public CategoryID: number;
163+
public QuantityPerUnit: string;
164+
public UnitPrice: number;
165+
public UnitsInStock: number;
166+
public UnitsOnOrder: number;
167+
public ReorderLevel: number;
168+
public Discontinued: boolean;
169+
public OrderDate: Date;
170+
public OrderDateDelay: Date;
171+
public OrderFullDate: Date;
172+
}
173+
//end data

0 commit comments

Comments
 (0)