Skip to content

Commit f5a2a17

Browse files
IMinchev64IMinchev64
authored
feat(grids): add custom cell merging samples (#1065)
1 parent a032ffd commit f5a2a17

Some content is hidden

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

65 files changed

+4222
-0
lines changed

‎samples/grids/grid/cell-merge-custom-sample/.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/grid/cell-merge-custom-sample/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 Clipboard Operations feature using [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/grid/clipboard-operations" 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/grid/clipboard-operations?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/grid/clipboard-operations
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/cell-merge-custom-sample/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Cell Merge Custom | Ignite UI | Web Components</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+
</head>
14+
<body>
15+
<div id="root">
16+
<div class="container sample ig-typography">
17+
<div class="container fill">
18+
<igc-grid auto-generate="false" id="grid" cell-merge-mode="always" width="100%" height="570px">
19+
<igc-column field="ActionID" header="Action ID" hidden="true"></igc-column>
20+
<igc-column field="ProjectName" header="Project Name" merge="true"></igc-column>
21+
<igc-column field="Type" header="Type" merge="true"></igc-column>
22+
<igc-column field="Priority" header="Priority" merge="true"></igc-column>
23+
<igc-column field="Status" header="Status" merge="true"></igc-column>
24+
<igc-column field="ActionName" header="Action"></igc-column>
25+
<igc-column field="Created" header="Created" data-type="date"></igc-column>
26+
</igc-grid>
27+
</div>
28+
</div>
29+
</div>
30+
31+
<% if (false) { %>
32+
<script src="src/index.ts"></script>
33+
<% } %>
34+
</body>
35+
</html>

‎samples/grids/grid/cell-merge-custom-sample/package.json‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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": "^6.3.4",
30+
"igniteui-webcomponents-core": "6.2.1",
31+
"igniteui-webcomponents-grids": "6.2.0-rc.0",
32+
"igniteui-webcomponents-inputs": "6.2.1",
33+
"igniteui-webcomponents-layouts": "6.2.1",
34+
"lit-html": "^3.3.1",
35+
"tslib": "^2.8.1"
36+
},
37+
"devDependencies": {
38+
"@babel/cli": "^7.28.3",
39+
"@babel/core": "^7.28.4",
40+
"@babel/plugin-transform-class-properties": "^7.27.1",
41+
"@babel/plugin-transform-class-static-block": "^7.28.3",
42+
"@babel/plugin-transform-runtime": "^7.28.3",
43+
"@babel/preset-env": "^7.28.3",
44+
"@babel/preset-typescript": "^7.27.1",
45+
"@types/source-map": "^0.5.7",
46+
"babel-loader": "^10.0.0",
47+
"babel-plugin-transform-custom-element-classes": "^0.1.0",
48+
"css-loader": "^7.1.2",
49+
"csv-loader": "^3.0.5",
50+
"file-loader": "^6.2.0",
51+
"fork-ts-checker-webpack-plugin": "^9.1.0",
52+
"html-webpack-plugin": "^5.6.4",
53+
"parcel-bundler": "^1.12.5",
54+
"source-map": "^0.7.6",
55+
"style-loader": "^4.0.0",
56+
"tsconfig-paths-webpack-plugin": "^4.2.0",
57+
"typescript": "^5.9.2",
58+
"webpack": "^5.101.3",
59+
"webpack-cli": "^6.0.1",
60+
"webpack-dev-server": "^5.2.2",
61+
"worker-loader": "^3.0.8",
62+
"xml-loader": "^1.2.1"
63+
}
64+
}

‎samples/grids/grid/cell-merge-custom-sample/sandbox.config.json‎

Lines changed: 7 additions & 0 deletions
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/cell-merge-custom-sample/src/index.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/* shared styles are loaded from: */
2+
/* https://static.infragistics.com/xplatform/css/samples */

‎samples/grids/grid/cell-merge-custom-sample/src/index.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import 'igniteui-webcomponents-grids/grids/combined';
2+
import { IgcDefaultMergeStrategy, IgcGridComponent, IgcGridMergeStrategy } from 'igniteui-webcomponents-grids/grids';
3+
import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
4+
import 'igniteui-webcomponents/themes/light/bootstrap.css';
5+
import { defineAllComponents } from 'igniteui-webcomponents';
6+
7+
defineAllComponents();
8+
9+
import './index.css';
10+
11+
type RecordType = {
12+
ActionID: string;
13+
ProjectName: string;
14+
ActionName: string;
15+
Type: string;
16+
Priority: string;
17+
Status: string;
18+
Created: Date;
19+
LastEdit: Date;
20+
};
21+
22+
class PerProjectMergeStrategy extends IgcDefaultMergeStrategy {
23+
public comparer(prevRecord: RecordType, record: RecordType, field: string): boolean {
24+
const a = (prevRecord as any)[field];
25+
const b = (record as any)[field];
26+
const projA = prevRecord.ProjectName;
27+
const projB = record.ProjectName;
28+
return a === b && projA === projB;
29+
}
30+
}
31+
32+
export class Sample {
33+
private grid: IgcGridComponent;
34+
35+
constructor() {
36+
this.grid = document.getElementById('grid') as IgcGridComponent;
37+
38+
this.grid.data = this.data;
39+
(this.grid as any).mergeStrategy = new PerProjectMergeStrategy();
40+
this.grid.cellMergeMode = 'always';
41+
}
42+
43+
private _data: RecordType[] | null = null;
44+
public get data(): RecordType[] {
45+
if (!this._data) {
46+
this._data = [
47+
{ ActionID: '1', ProjectName: 'IOT Switch Project', ActionName: 'Data Import', Type: 'Request', Priority: 'Low', Status: 'New', Created: new Date('2017-03-25'), LastEdit: new Date('2017-05-08') },
48+
{ ActionID: '2', ProjectName: 'IOT Switch Project', ActionName: 'Reports', Type: 'Request', Priority: 'Low', Status: 'New', Created: new Date('2017-03-14'), LastEdit: new Date('2017-03-15') },
49+
{ ActionID: '4', ProjectName: 'IOT Switch Project', ActionName: 'Multiple Settings', Type: 'Request', Priority: 'Low', Status: 'Rejected', Created: new Date('2017-04-05'), LastEdit: new Date('2017-04-30') },
50+
{ ActionID: '3', ProjectName: 'IOT Switch Project', ActionName: 'Data Archiving', Type: 'Request', Priority: 'Medium', Status: 'New', Created: new Date('2017-08-21'), LastEdit: new Date('2017-09-08') },
51+
{ ActionID: '5', ProjectName: 'IOT Switch Project', ActionName: 'Main Menu: Return Button', Type: 'Bug', Priority: 'Medium', Status: 'Fixed', Created: new Date('2017-06-17'), LastEdit: new Date('2017-07-03') },
52+
{ ActionID: '6', ProjectName: 'IOT Switch Project', ActionName: 'Auto Turn Off', Type: 'Bug', Priority: 'Medium', Status: 'New', Created: new Date('2017-04-12'), LastEdit: new Date('2017-05-27') },
53+
{ ActionID: '7', ProjectName: 'VR Device', ActionName: 'Higher DRI', Type: 'Request', Priority: 'Medium', Status: 'New', Created: new Date('2016-08-11'), LastEdit: new Date('2016-08-11') },
54+
{ ActionID: '8', ProjectName: 'VR Device', ActionName: 'Accessible Power Button', Type: 'Request', Priority: 'Medium', Status: 'New', Created: new Date('2016-07-13'), LastEdit: new Date('2016-07-14') },
55+
{ ActionID: '9', ProjectName: 'VR Device', ActionName: 'Additional options', Type: 'Request', Priority: 'High', Status: 'Rejected', Created: new Date('2016-09-02'), LastEdit: new Date('2016-09-08') },
56+
{ ActionID: '10', ProjectName: 'VR Device', ActionName: 'Data Log', Type: 'Request', Priority: 'High', Status: 'New', Created: new Date('2017-03-25'), LastEdit: new Date('2017-05-08') },
57+
{ ActionID: '12', ProjectName: 'VR Device', ActionName: 'Motion Blur', Type: 'Bug', Priority: 'High', Status: 'New', Created: new Date('2017-03-25'), LastEdit: new Date('2017-05-08') },
58+
{ ActionID: '11', ProjectName: 'VR Device', ActionName: 'Left Sensors Delay', Type: 'Bug', Priority: 'High', Status: 'Fixed', Created: new Date('2017-03-25'), LastEdit: new Date('2017-05-08') },
59+
];
60+
}
61+
return this._data;
62+
}
63+
}
64+
65+
new Sample();
66+

‎samples/grids/grid/cell-merge-custom-sample/tsconfig.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"compilerOptions": {
3+
"noImplicitReturns": true,
4+
"esModuleInterop": true,
5+
"noImplicitAny": true,
6+
"declarationDir": "dist/types",
7+
"moduleResolution": "node",
8+
"declaration": true,
9+
"target": "es2015",
10+
"module": "es2015",
11+
"strict": true,
12+
"strictNullChecks": false,
13+
},
14+
"include": [
15+
"src/**/*"
16+
],
17+
"exclude": [
18+
"node_modules",
19+
"dist"
20+
]
21+
}

‎samples/grids/grid/cell-merge-custom-sample/tslint.json‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
3+
"linterOptions": {
4+
"exclude": [
5+
"node_modules/**/*.ts",
6+
"**/odatajs-4.0.0.js",
7+
"src/images/*.*"
8+
]
9+
},
10+
"rules": {
11+
"only-arrow-functions": false,
12+
"jsx-self-close": false,
13+
"jsx-wrap-multiline": false,
14+
"no-var-requires": false,
15+
"no-var": false,
16+
"no-var-keyword": false,
17+
"no-console": false,
18+
"no-string-literal": false,
19+
"no-unused-vars": false,
20+
"@typescript-eslint/no-unused-vars": "off",
21+
"jsx-no-lambda": false,
22+
"ordered-imports": false,
23+
"object-literal-sort-keys": false,
24+
"object-literal-shorthand": false,
25+
"member-ordering": false,
26+
"curly": [false, "ignore-same-line"],
27+
"max-classes-per-file": [true, 10],
28+
"prefer-const": false,
29+
"prefer-for-of": false,
30+
"no-useless-constructor": false,
31+
"@typescript-eslint/no-useless-constructor": "off",
32+
"@typescript-eslint/type-annotation-spacing": "off"
33+
},
34+
"jsRules": {
35+
"only-arrow-functions": false,
36+
"jsx-self-close": false,
37+
"jsx-wrap-multiline": false,
38+
"no-var-requires": false,
39+
"no-console": false,
40+
"no-unused-vars": false,
41+
"@typescript-eslint/no-unused-vars": "off",
42+
"jsx-no-lambda": false,
43+
"ordered-imports": false,
44+
"object-literal-sort-keys": false,
45+
"object-literal-shorthand": false,
46+
"curly": [false, "ignore-same-line"],
47+
"max-classes-per-file": [true, 10],
48+
"prefer-const": false,
49+
"prefer-for-of": false,
50+
"no-useless-constructor": false,
51+
"@typescript-eslint/no-useless-constructor": "off"
52+
}
53+
}

0 commit comments

Comments
 (0)