Skip to content

Commit 864d1cf

Browse files
tishko0tishko0
authored
added grid toolbar sample with dynamic features (#746)
1 parent bd7e2bd commit 864d1cf

File tree

8 files changed

+2042
-1954
lines changed

8 files changed

+2042
-1954
lines changed

‎browser/public/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@
108108
<label id="nav-dashboard-tile" class="nav-component">Dashboard Tile</label>
109109
<div id="nav-dashboard-tile-list" class="nav-list" state="collapsed">
110110
<a class="nav-link" href="#" data-nav="/samples/charts/dashboard-tile/chart-dashboard">─<span>Chart Dashboard</span></a>
111+
<a class="nav-link" href="#" data-nav="/samples/charts/dashboard-tile/financial-dashboard">─<span>Financial Dashboard</span></a>
111112
<a class="nav-link" href="#" data-nav="/samples/charts/dashboard-tile/gauge-dashboard">─<span>Gauge Dashboard</span></a>
112113
<a class="nav-link" href="#" data-nav="/samples/charts/dashboard-tile/map-dashboard">─<span>Map Dashboard</span></a>
113114
<a class="nav-link" href="#" data-nav="/samples/charts/dashboard-tile/pie-dashboard">─<span>Pie Dashboard</span></a>
@@ -574,6 +575,7 @@
574575
<a class="nav-link" href="#" data-nav="/samples/grids/grid/styling-custom-css">─<span>Styling Custom Css</span></a>
575576
<a class="nav-link" href="#" data-nav="/samples/grids/grid/toolbar-sample-1">─<span>Toolbar Sample1</span></a>
576577
<a class="nav-link" href="#" data-nav="/samples/grids/grid/toolbar-sample-2">─<span>Toolbar Sample2</span></a>
578+
<a class="nav-link" href="#" data-nav="/samples/grids/grid/toolbar-sample-2-custom">─<span>Toolbar Sample2 Custom</span></a>
577579
<a class="nav-link" href="#" data-nav="/samples/grids/grid/toolbar-sample-3">─<span>Toolbar Sample3</span></a>
578580
<a class="nav-link" href="#" data-nav="/samples/grids/grid/toolbar-sample-4">─<span>Toolbar Sample4</span></a>
579581
<a class="nav-link" href="#" data-nav="/samples/grids/grid/toolbar-style">─<span>Toolbar Style</span></a>

‎samples/charts/dashboard-tile/financial-dashboard/ReadMe.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
3+
4+
This folder contains implementation of Web Components application with example of Financial Dashboard feature using [Dashboard Tile](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
10+
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
11+
</a>
12+
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
13+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/charts/dashboard-tile/financial-dashboard" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/charts/dashboard-tile/financial-dashboard?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
19+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
27+
28+
## Instructions
29+
30+
To set up this project locally, execute these commands:
31+
32+
```
33+
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
34+
git checkout master
35+
cd ./igniteui-wc-examples
36+
cd ./samples/charts/dashboard-tile/financial-dashboard
37+
```
38+
39+
open above folder in VS Code or type:
40+
```
41+
code .
42+
```
43+
44+
In terminal window, run:
45+
46+
```
47+
npm install
48+
npm run start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).

‎samples/grids/grid/toolbar-sample-2/index.html‎

Lines changed: 49 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,54 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>Sample | Ignite UI | Web Components | infragistics</title>
5-
<meta charset="UTF-8" />
3+
<head>
4+
<title>Sample | Ignite UI | Web Components | infragistics</title>
5+
<meta charset="UTF-8" />
66

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" />
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+
</head>
1314

14-
</head>
15+
<body>
16+
<div id="root">
17+
<div class="container sample ig-typography">
18+
<div class="container">
19+
<div id="control-panel">
20+
<label>
21+
<input type="checkbox" id="toggleAdvancedFiltering" />
22+
Show Advanced Filtering
23+
</label>
24+
<label>
25+
<input type="checkbox" id="toggleHiding" />
26+
Show Hiding
27+
</label>
28+
<label>
29+
<input type="checkbox" id="togglePinning" />
30+
Show Pinning
31+
</label>
32+
<label>
33+
<input type="checkbox" id="toggleExporter" />
34+
Show Exporter
35+
</label>
36+
</div>
37+
<igc-grid auto-generate="false" name="grid1" id="grid1">
38+
<igc-column field="Name" header="Athlete" width="200px"> </igc-column>
39+
<igc-column field="CountryName" header="Country" width="200px"> </igc-column>
40+
<igc-column field="BeatsPerMinute" header="Beats Per Minute"> </igc-column>
41+
<igc-column field="TopSpeed" header="Top Speed"> </igc-column>
42+
<igc-column field="AthleteNumber" header="ID"> </igc-column>
43+
<igc-column field="TrackProgress" header="Progress"> </igc-column>
44+
</igc-grid>
45+
</div>
46+
</div>
47+
</div>
1548

16-
<body>
17-
<div id="root">
18-
19-
<div class="container sample ig-typography">
20-
21-
<div class="container fill">
22-
<igc-grid
23-
auto-generate="false"
24-
name="grid1"
25-
id="grid1">
26-
<igc-grid-toolbar
27-
>
28-
<igc-grid-toolbar-actions
29-
>
30-
<igc-grid-toolbar-advanced-filtering
31-
>
32-
</igc-grid-toolbar-advanced-filtering>
33-
<igc-grid-toolbar-hiding
34-
>
35-
</igc-grid-toolbar-hiding>
36-
<igc-grid-toolbar-pinning
37-
>
38-
</igc-grid-toolbar-pinning>
39-
<igc-grid-toolbar-exporter
40-
>
41-
</igc-grid-toolbar-exporter>
42-
</igc-grid-toolbar-actions>
43-
</igc-grid-toolbar>
44-
<igc-column
45-
field="Name"
46-
header="Athlete"
47-
width="200px">
48-
</igc-column>
49-
<igc-column
50-
field="CountryName"
51-
header="Country"
52-
width="200px">
53-
</igc-column>
54-
<igc-column
55-
field="BeatsPerMinute"
56-
header="Beats Per Minute">
57-
</igc-column>
58-
<igc-column
59-
field="TopSpeed"
60-
header="Top Speed">
61-
</igc-column>
62-
<igc-column
63-
field="AthleteNumber"
64-
header="ID">
65-
</igc-column>
66-
<igc-column
67-
field="TrackProgress"
68-
header="Progress">
69-
</igc-column>
70-
</igc-grid>
71-
</div>
72-
</div>
73-
74-
</div>
75-
76-
<!-- This script is needed only for parcel and it will be excluded for webpack -->
77-
<% if (false) { %><script src="src/index.ts"></script><% } %>
78-
</body>
79-
</html>
49+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
50+
<% if (false) { %>
51+
<script src="src/index.ts"></script>
52+
<% } %>
53+
</body>
54+
</html>

‎samples/grids/grid/toolbar-sample-2/package.json‎

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
11
{
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 --mode development --config ./webpack.config.js --hot --progress --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 --progress --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 --progress --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 --progress --open --content-base dist/",
22-
"start:legacy": "npm run serve:dev:legacy"
23-
},
24-
"dependencies": {
25-
"babel-runtime": "^6.26.0",
26-
"igniteui-webcomponents-core": "5.1.1",
27-
"igniteui-webcomponents-grids": "5.1.1",
28-
"igniteui-webcomponents-inputs": "5.1.1",
29-
"igniteui-webcomponents-layouts": "5.1.1",
30-
"lit-html": "^3.2.0",
31-
"tslib": "^2.0.0"
32-
},
33-
"devDependencies": {
34-
"@babel/cli": "^7.8.3",
35-
"@babel/core": "^7.8.3",
36-
"@babel/plugin-proposal-class-properties": "^7.8.3",
37-
"@babel/plugin-transform-runtime": "^7.10.0",
38-
"@babel/preset-env": "^7.8.3",
39-
"@babel/preset-typescript": "^7.8.3",
40-
"@types/source-map": "^0.5.7",
41-
"babel-loader": "^8.1.0",
42-
"babel-plugin-transform-custom-element-classes": "^0.1.0",
43-
"css-loader": "^1.0.0",
44-
"csv-loader": "^3.0.2",
45-
"file-loader": "^4.2.0",
46-
"fork-ts-checker-webpack-plugin": "^4.1.5",
47-
"html-webpack-plugin": "^4.3.0",
48-
"parcel-bundler": "^1.6.1",
49-
"source-map": "^0.7.3",
50-
"style-loader": "^0.22.1",
51-
"tsconfig-paths-webpack-plugin": "^4.0.0",
52-
"typescript": "^4.4.4",
53-
"webpack": "^5.96.1",
54-
"webpack-cli": "^4.10.0",
55-
"webpack-dev-server": "^4.11.1",
56-
"worker-loader": "^3.0.8",
57-
"xml-loader": "^1.2.1"
58-
}
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 --mode development --config ./webpack.config.js --hot --progress --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 --progress --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 --progress --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 --progress --open --content-base dist/",
22+
"start:legacy": "npm run serve:dev:legacy"
23+
},
24+
"dependencies": {
25+
"babel-runtime": "^6.26.0",
26+
"igniteui-webcomponents-core": "5.1.1",
27+
"igniteui-webcomponents-grids": "5.1.1",
28+
"igniteui-webcomponents-inputs": "5.1.1",
29+
"igniteui-webcomponents-layouts": "5.1.1",
30+
"lit-html": "^3.2.0",
31+
"tslib": "^2.0.0"
32+
},
33+
"devDependencies": {
34+
"@babel/cli": "^7.8.3",
35+
"@babel/core": "^7.8.3",
36+
"@babel/plugin-proposal-class-properties": "^7.8.3",
37+
"@babel/plugin-transform-runtime": "^7.10.0",
38+
"@babel/preset-env": "^7.8.3",
39+
"@babel/preset-typescript": "^7.8.3",
40+
"@types/source-map": "^0.5.7",
41+
"babel-loader": "^8.1.0",
42+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
43+
"css-loader": "^1.0.0",
44+
"csv-loader": "^3.0.2",
45+
"file-loader": "^4.2.0",
46+
"fork-ts-checker-webpack-plugin": "^4.1.5",
47+
"html-webpack-plugin": "^4.3.0",
48+
"parcel-bundler": "^1.6.1",
49+
"source-map": "^0.7.3",
50+
"style-loader": "^0.22.1",
51+
"tsconfig-paths-webpack-plugin": "^4.0.0",
52+
"typescript": "^4.4.4",
53+
"webpack": "^5.96.1",
54+
"webpack-cli": "^4.10.0",
55+
"webpack-dev-server": "^4.11.1",
56+
"worker-loader": "^3.0.8",
57+
"xml-loader": "^1.2.1"
58+
}
5959
}

0 commit comments

Comments
 (0)