-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add state persistence custom sample.
- Loading branch information
Showing
13 changed files
with
993 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "printWidth": 250, | ||
| "tabWidth": 4, | ||
| "useTabs": false, | ||
| "semi": true, | ||
| "singleQuote": false, | ||
| "trailingComma": "none", | ||
| "bracketSpacing": true, | ||
| "jsxBracketSameLine": false, | ||
| "fluid": false | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <!-- NOTE: do not change this file because it's auto re-generated from template: --> | ||
| <!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md --> | ||
|
|
||
| This folder contains implementation of Web Components application with example of State Persistence feature using [Grid](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component. | ||
|
|
||
|
|
||
| <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> | ||
| <body> | ||
| <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer"> | ||
| <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"/> | ||
| </a> | ||
| <a target="_blank" href="./src/index.ts" rel="noopener noreferrer"> | ||
| <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"/> | ||
| </a> | ||
| <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/grids/grid/state-persistence" rel="noopener noreferrer"> | ||
| <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"/> | ||
| </a> | ||
| <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/grids/grid/state-persistence?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer"> | ||
| <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"/> | ||
| </a> | ||
| </body> | ||
| </html> | ||
|
|
||
| ## Instructions | ||
|
|
||
| To set up this project locally, execute these commands: | ||
|
|
||
| ``` | ||
| git clone https://github.com/IgniteUI/igniteui-wc-examples.git | ||
| cd ./igniteui-wc-examples | ||
| cd ./samples/grids/grid/state-persistence | ||
| ``` | ||
|
|
||
| open above folder in VS Code or type: | ||
| ``` | ||
| code . | ||
| ``` | ||
|
|
||
| In terminal window, run: | ||
|
|
||
| ``` | ||
| npm install | ||
| npm run start | ||
| ``` | ||
|
|
||
| Then open http://localhost:4200/ in your browser | ||
|
|
||
|
|
||
| ## Learn More | ||
|
|
||
| To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Sample | Ignite UI | Web Components | infragistics</title> | ||
| <meta charset="UTF-8" /> | ||
|
|
||
| <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" > | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" /> | ||
| <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /> | ||
| <link rel="stylesheet" href="./about.css" type="text/css" /> | ||
| <style> | ||
| .horizontal { | ||
| gap: 10px; | ||
| flex-basis: fit-content; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="root"> | ||
| <div style="padding: 0.5rem"> | ||
| <div style="text-align: center; width: 900px"> | ||
| <br /> | ||
| <span>Navigating to the previous page, components will reinitialize as per their initial configuration, therefore the igxGrid will lose its state.</span> | ||
| <br /> | ||
| <span>What our GridSaveStateComponent does is reading the state from the window.localStorage object and applying the corresponding state in the AfterViewInit lifecycle.</span><br /> | ||
| <igc-button id="backBtn" variant="contained">Go Back</igc-button> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- This script is needed only for parcel and it will be excluded for webpack --> | ||
| <% if (false) { %><script src="src/about/about.ts"></script><% } %> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Sample | Ignite UI | Web Components | infragistics</title> | ||
| <meta charset="UTF-8" /> | ||
|
|
||
| <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" > | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /> | ||
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" /> | ||
| <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /> | ||
| <link rel="stylesheet" href="/src/index.css" type="text/css" /> | ||
| <style> | ||
| .horizontal { | ||
| gap: 10px; | ||
| flex-basis: fit-content; | ||
| flex-wrap: wrap; | ||
| } | ||
| .sampleContainer { | ||
| padding: 0.5rem | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="root"> | ||
| <div class="sampleContainer"> | ||
| <div class="container horizontal"> | ||
| <igc-button id="restoreState" variant="contained"> | ||
| <igc-icon name="restore" collection="material"></igc-icon> | ||
| Restore | ||
| </igc-button> | ||
| <igc-button id="saveState" variant="contained"> | ||
| <igc-icon name="save" collection="material"></igc-icon> | ||
| Save | ||
| </igc-button> | ||
| <igc-button id="resetState" variant="contained"> | ||
| <igc-icon name="clear" collection="material"></igc-icon> | ||
| Reset | ||
| </igc-button> | ||
| <igc-button id="leavePage" variant="contained"> | ||
| <igc-icon name="forward" collection="material"></igc-icon> | ||
| Leave | ||
| </igc-button> | ||
| <igc-button id="clearStorage" variant="contained"> | ||
| <igc-icon name="delete" collection="material"></igc-icon> | ||
| Clear | ||
| </igc-button> | ||
| <igc-button id="reloadPage" variant="contained"> | ||
| <igc-icon name="refresh" collection="material"></igc-icon> | ||
| Reload | ||
| </igc-button> | ||
| </div> | ||
|
|
||
| <div class="container horizontal"> | ||
| <ul> | ||
| <li>Clicking the SAVE button or leaving the page <a id="leaveLink" href="./about.html"><strong>here</strong></a> will save grid state to localStorage.</li> | ||
| <li>Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.</li> | ||
| <li>Select/Deselect checkboxes to control saving / restoring feature state.</li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <div class="container horizontal"> | ||
| <igc-checkbox id="allFeatures" checked>All Features</igc-checkbox> | ||
| <igc-checkbox id="advancedFiltering" checked>Adv. Filtering</igc-checkbox> | ||
| <igc-checkbox id="cellSelection" checked>Cell Selection</igc-checkbox> | ||
| <igc-checkbox id="columns" checked>Columns</igc-checkbox> | ||
| <igc-checkbox id="columnSelection" checked>Col Selection</igc-checkbox> | ||
| <igc-checkbox id="expansion" checked>Expansion</igc-checkbox> | ||
| <igc-checkbox id="filtering" checked>Filtering</igc-checkbox> | ||
| <igc-checkbox id="paging" checked>Paging</igc-checkbox> | ||
| <igc-checkbox id="rowPinning" checked>Row Pinning</igc-checkbox> | ||
| <igc-checkbox id="rowSelection" checked>Row Selection</igc-checkbox> | ||
| <igc-checkbox id="sorting" checked>Sorting</igc-checkbox> | ||
| <igc-checkbox id="groupBy" checked>GroupBy</igc-checkbox> | ||
| </div> | ||
|
|
||
| <igc-grid id="grid" name="grid" primary-key="ID" width="98%" height="500px" auto-generate="false" moving="true" allow-filtering="true"> | ||
| <igc-grid-state id="gridState"></igc-grid-state> | ||
| <igc-grid-toolbar> | ||
| <igc-grid-toolbar-actions> | ||
| <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding> | ||
| <igc-grid-toolbar-pinning></igc-grid-toolbar-pinning> | ||
| </igc-grid-toolbar-actions> | ||
| </igc-grid-toolbar> | ||
| <igc-action-strip> | ||
| <igc-grid-pinning-actions> | ||
| </igc-grid-pinning-actions> | ||
| </igc-action-strip> | ||
| <igc-paginator></igc-paginator> | ||
|
|
||
| <igc-column field="ID" header="ID" sortable="true" filterable="true" pinned="true"></igc-column> | ||
| <igc-column field="ContactName" header="Contact Name" sortable="true" filterable="true" pinned="true"></igc-column> | ||
| <igc-column field="ContactTitle" header="Contact Title" sortable="true" filterable="true" pinned="true"></igc-column> | ||
| <igc-column field="CompanyName" header="Company Name" sortable="true" filterable="true"></igc-column> | ||
| <igc-column field="Country" header="Country" sortable="true" filterable="true" groupable="true"></igc-column> | ||
| <igc-column field="City" header="City" sortable="true" filterable="true" groupable="true"></igc-column> | ||
| <igc-column field="Address" header="Address" sortable="true" filterable="true" groupable="true" ></igc-column> | ||
| <igc-column field="PostalCode" header="Postal Code" sortable="true" filterable="true" groupable="true"></igc-column> | ||
| </igc-grid> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- This script is needed only for parcel and it will be excluded for webpack --> | ||
| <% if (false) { %><script src="src/index.ts"></script><% } %> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| { | ||
| "name": "example-ignite-ui-web-components", | ||
| "description": "This project provides example of using Ignite UI for Web Components", | ||
| "author": "Infragistics", | ||
| "version": "1.0.0", | ||
| "license": "", | ||
| "private": true, | ||
| "homepage": ".", | ||
| "main": "src/index.ts", | ||
| "scripts": { | ||
| "build": "npm run build:prod", | ||
| "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", | ||
| "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", | ||
| "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", | ||
| "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/", | ||
| "start": "npm run serve:dev", | ||
| "build:legacy": "npm run build:prod:legacy", | ||
| "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", | ||
| "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", | ||
| "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", | ||
| "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/", | ||
| "start:legacy": "npm run serve:dev:legacy" | ||
| }, | ||
| "dependencies": { | ||
| "@webcomponents/custom-elements": "^1.4.1", | ||
| "@webcomponents/template": "^1.4.2", | ||
| "babel-runtime": "^6.26.0", | ||
| "core-js": "^3.6.5", | ||
| "igniteui-webcomponents-core": "4.3.1", | ||
| "igniteui-webcomponents-grids": "4.3.1", | ||
| "igniteui-webcomponents-inputs": "4.3.1", | ||
| "igniteui-webcomponents-layouts": "4.3.1", | ||
| "lit-html": "^2.2.0", | ||
| "tslib": "^2.0.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.8.3", | ||
| "@babel/core": "^7.8.3", | ||
| "@babel/plugin-proposal-class-properties": "^7.8.3", | ||
| "@babel/plugin-transform-runtime": "^7.10.0", | ||
| "@babel/preset-env": "^7.8.3", | ||
| "@babel/preset-typescript": "^7.8.3", | ||
| "@types/source-map": "^0.5.7", | ||
| "babel-loader": "^8.1.0", | ||
| "babel-plugin-transform-custom-element-classes": "^0.1.0", | ||
| "css-loader": "^1.0.0", | ||
| "csv-loader": "^3.0.2", | ||
| "file-loader": "^4.2.0", | ||
| "fork-ts-checker-webpack-plugin": "^4.1.5", | ||
| "html-webpack-plugin": "^4.3.0", | ||
| "parcel-bundler": "^1.6.1", | ||
| "source-map": "^0.7.3", | ||
| "style-loader": "^0.22.1", | ||
| "tsconfig-paths-webpack-plugin": "^4.0.0", | ||
| "typescript": "^4.4.4", | ||
| "webpack": "^5.74.0", | ||
| "webpack-cli": "^4.10.0", | ||
| "webpack-dev-server": "^4.11.1", | ||
| "worker-loader": "^3.0.8", | ||
| "xml-loader": "^1.2.1" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "infiniteLoopProtection": false, | ||
| "hardReloadOnChange": false, | ||
| "view": "browser", | ||
| "template": "parcel" | ||
| } | ||
|
|
Oops, something went wrong.