Skip to content

Commit cc53a11

Browse files
RivaIvanovaChronosSF
RivaIvanova
and
ChronosSF
authored
Add hGrid custom toolbar samples (#681)
* feat(hGrid): add custom toolbar samples * chore(*) update to 4.8.0 * fix(hGrid): add toolbar actions and child grid toolbar --------- Co-authored-by: Stamen Stoychev <[email protected]>
1 parent 3dec983 commit cc53a11

File tree

23 files changed

+4189
-0
lines changed

23 files changed

+4189
-0
lines changed

‎browser/public/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -538,12 +538,14 @@
538538
</div>
539539
<label id="nav-hierarchical-grid" class="nav-component">Hierarchical Grid</label>
540540
<div id="nav-hierarchical-grid-list" class="nav-list" state="collapsed">
541+
<a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/data-exporting-indicator">─<span>Data Exporting Indicator</span></a>
541542
<a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/column-auto-sizing">─<span>Column Auto Sizing</span></a>
542543
<a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/column-resize-styling">─<span>Column Resize Styling</span></a>
543544
<a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/column-resizing">─<span>Column Resizing</span></a>
544545
<a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/data-performance-virtualization">─<span>Data Performance Virtualization</span></a>
545546
<a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/overview">─<span>Overview</span></a>
546547
<a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/hierarchical-grid-styling">─<span>Styling</span></a>
548+
<a class="nav-link" href="#" data-nav="/samples/grids/hierarchical-grid/toolbar-sample-4">─<span>Toolbar Sample4</span></a>
547549
</div>
548550
<label id="nav-list" class="nav-component">List</label>
549551
<div id="nav-list-list" class="nav-list" state="collapsed">

‎samples/grids/hierarchical-grid/data-exporting-indicator/.prettierrc‎

Lines changed: 11 additions & 0 deletions
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/hierarchical-grid/data-exporting-indicator/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 Data Exporting Indicator feature using [Hierarchical Grid](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/grids/hierarchical-grid/data-exporting-indicator" 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/grids/hierarchical-grid/data-exporting-indicator?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/grids/hierarchical-grid/data-exporting-indicator
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/hierarchical-grid/data-exporting-indicator/index.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Sample | Ignite UI | Web Components | infragistics</title>
6+
<meta charset="UTF-8" />
7+
8+
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
12+
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
13+
<link rel="stylesheet" href="/src/index.css" type="text/css" />
14+
15+
</head>
16+
17+
<body>
18+
<div id="root">
19+
<div class="container sample">
20+
<div class="container fill">
21+
22+
<igc-hierarchical-grid auto-generate="false" name="hGrid1" id="hGrid1">
23+
<igc-grid-toolbar id="toolbar">
24+
<igc-grid-toolbar-title>Singers</igc-grid-toolbar-title>
25+
<igc-button id="simulate">
26+
Simulate long running operation
27+
</igc-button>
28+
<igc-grid-toolbar-actions>
29+
<igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
30+
</igc-grid-toolbar-actions>
31+
</igc-grid-toolbar>
32+
<igc-column field="Artist" header="Artist" data-type="string" width="150px">
33+
</igc-column>
34+
<igc-column field="Photo" header="Photo" data-type="image">
35+
</igc-column>
36+
<igc-column field="Debut" header="Debut" data-type="number">
37+
</igc-column>
38+
<igc-column field="GrammyNominations" header="Grammy Nominations" data-type="string" width="200px">
39+
</igc-column>
40+
<igc-column field="GrammyAwards" header="Grammy Awards" data-type="string" width="200px">
41+
</igc-column>
42+
<igc-row-island child-data-key="Albums" auto-generate="false">
43+
<igc-column field="Album" header="Album" data-type="string">
44+
</igc-column>
45+
<igc-column field="LaunchDate" header="Launch Date" data-type="date">
46+
</igc-column>
47+
<igc-column field="BillboardReview" header="Billboard Review" data-type="string">
48+
</igc-column>
49+
<igc-column field="USBillboard200" header="US Billboard 200" data-type="string">
50+
</igc-column>
51+
<igc-row-island child-data-key="Songs" auto-generate="false">
52+
<igc-column field="Number" header="No." data-type="string">
53+
</igc-column>
54+
<igc-column field="Title" header="Title" data-type="string">
55+
</igc-column>
56+
<igc-column field="Released" header="Released" data-type="date">
57+
</igc-column>
58+
<igc-column field="Genre" header="Genre" data-type="string">
59+
</igc-column>
60+
</igc-row-island>
61+
</igc-row-island>
62+
<igc-row-island child-data-key="Tours" auto-generate="false">
63+
<igc-column field="Tour" header="Tour" data-type="string">
64+
</igc-column>
65+
<igc-column field="StartedOn" header="Started on" data-type="string">
66+
</igc-column>
67+
<igc-column field="Location" header="Location" data-type="string">
68+
</igc-column>
69+
<igc-column field="Headliner" header="Headliner" data-type="string">
70+
</igc-column>
71+
</igc-row-island>
72+
</igc-hierarchical-grid>
73+
74+
</div>
75+
</div>
76+
</div>
77+
78+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
79+
<% if (false) { %>
80+
<script src="src/index.ts"></script>
81+
<% } %>
82+
</body>
83+
84+
</html>

‎samples/grids/hierarchical-grid/data-exporting-indicator/package.json‎

Lines changed: 62 additions & 0 deletions
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 --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+
"@webcomponents/custom-elements": "^1.4.1",
26+
"@webcomponents/template": "^1.4.2",
27+
"babel-runtime": "^6.26.0",
28+
"core-js": "^3.6.5",
29+
"igniteui-webcomponents-core": "4.8.0",
30+
"igniteui-webcomponents-grids": "4.8.0",
31+
"igniteui-webcomponents-inputs": "4.8.0",
32+
"igniteui-webcomponents-layouts": "4.8.0",
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+
"css-loader": "^1.0.0",
47+
"csv-loader": "^3.0.2",
48+
"file-loader": "^4.2.0",
49+
"fork-ts-checker-webpack-plugin": "^4.1.5",
50+
"html-webpack-plugin": "^4.3.0",
51+
"parcel-bundler": "^1.6.1",
52+
"source-map": "^0.7.3",
53+
"style-loader": "^0.22.1",
54+
"tsconfig-paths-webpack-plugin": "^4.0.0",
55+
"typescript": "^4.4.4",
56+
"webpack": "^5.74.0",
57+
"webpack-cli": "^4.10.0",
58+
"webpack-dev-server": "^4.11.1",
59+
"worker-loader": "^3.0.8",
60+
"xml-loader": "^1.2.1"
61+
}
62+
}

‎samples/grids/hierarchical-grid/data-exporting-indicator/sandbox.config.json‎

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

0 commit comments

Comments
 (0)