IgniteUI · dkamburov · Oct 29, 2025 · Oct 27, 2025 · Oct 27, 2025 · Oct 27, 2025
diff --git a/samples/grids/grid/cell-merge-custom-sample/.prettierrc b/samples/grids/grid/cell-merge-custom-sample/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
diff --git a/samples/grids/grid/cell-merge-custom-sample/ReadMe.md b/samples/grids/grid/cell-merge-custom-sample/ReadMe.md
@@ -0,0 +1,56 @@
+<!-- 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 Clipboard Operations 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/clipboard-operations" 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/clipboard-operations?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>
+
+## Branches
+
+> **_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.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/grids/grid/clipboard-operations
+```
+
+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).
diff --git a/samples/grids/grid/cell-merge-custom-sample/index.html b/samples/grids/grid/cell-merge-custom-sample/index.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Cell Merge Custom | Ignite UI | Web Components</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" />
+    </head>
+    <body>
+        <div id="root">
+            <div class="container sample ig-typography">
+                <div class="container fill">
+                    <igc-grid auto-generate="false" id="grid" cell-merge-mode="always" width="100%" height="570px">
+                        <igc-column field="ActionID" header="Action ID" hidden="true"></igc-column>
+                        <igc-column field="ProjectName" header="Project Name" merge="true"></igc-column>
+                        <igc-column field="Type" header="Type" merge="true"></igc-column>
+                        <igc-column field="Priority" header="Priority" merge="true"></igc-column>
+                        <igc-column field="Status" header="Status" merge="true"></igc-column>
+                        <igc-column field="ActionName" header="Action"></igc-column>
+                        <igc-column field="Created" header="Created" data-type="date"></igc-column>
+                    </igc-grid>
+                </div>
+            </div>
+        </div>
+
+        <% if (false) { %>
+        <script src="src/index.ts"></script>
+        <% } %>
+    </body>
+</html>
diff --git a/samples/grids/grid/cell-merge-custom-sample/package.json b/samples/grids/grid/cell-merge-custom-sample/package.json
@@ -0,0 +1,64 @@
+{
+  "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": "^6.3.4",
+    "igniteui-webcomponents-core": "6.2.1",
+    "igniteui-webcomponents-grids": "6.2.0-rc.0",
+    "igniteui-webcomponents-inputs": "6.2.1",
+    "igniteui-webcomponents-layouts": "6.2.1",
+    "lit-html": "^3.3.1",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-class-static-block": "^7.28.3",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-typescript": "^7.27.1",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^10.0.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^7.1.2",
+    "csv-loader": "^3.0.5",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^9.1.0",
+    "html-webpack-plugin": "^5.6.4",
+    "parcel-bundler": "^1.12.5",
+    "source-map": "^0.7.6",
+    "style-loader": "^4.0.0",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  }
+}
diff --git a/samples/grids/grid/cell-merge-custom-sample/sandbox.config.json b/samples/grids/grid/cell-merge-custom-sample/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+
diff --git a/samples/grids/grid/cell-merge-custom-sample/src/index.css b/samples/grids/grid/cell-merge-custom-sample/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/grids/grid/cell-merge-custom-sample/src/index.ts b/samples/grids/grid/cell-merge-custom-sample/src/index.ts
@@ -0,0 +1,66 @@
+import 'igniteui-webcomponents-grids/grids/combined';
+import { IgcDefaultMergeStrategy, IgcGridComponent, IgcGridMergeStrategy } from 'igniteui-webcomponents-grids/grids';
+import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import { defineAllComponents } from 'igniteui-webcomponents';
+
+defineAllComponents();
+
+import './index.css';
+
+type RecordType = {
+  ActionID: string;
+  ProjectName: string;
+  ActionName: string;
+  Type: string;
+  Priority: string;
+  Status: string;
+  Created: Date;
+  LastEdit: Date;
+};
+
+class PerProjectMergeStrategy extends IgcDefaultMergeStrategy {
+  public comparer(prevRecord: RecordType, record: RecordType, field: string): boolean {
+    const a = (prevRecord as any)[field];
+    const b = (record as any)[field];
+    const projA = prevRecord.ProjectName;
+    const projB = record.ProjectName;
+    return a === b && projA === projB;
+  }
+}
+
+export class Sample {
+  private grid: IgcGridComponent;
+
+  constructor() {
+    this.grid = document.getElementById('grid') as IgcGridComponent;
+
+    this.grid.data = this.data;
+    (this.grid as any).mergeStrategy = new PerProjectMergeStrategy();
+    this.grid.cellMergeMode = 'always';
+  }
+
+  private _data: RecordType[] | null = null;
+  public get data(): RecordType[] {
+    if (!this._data) {
+      this._data = [
+        { 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') },
+        { 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') },
+        { 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') },
+        { 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') },
+        { 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') },
+        { 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') },
+        { 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') },
+        { 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') },
+        { 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') },
+        { 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') },
+        { 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') },
+        { 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') },
+      ];
+    }
+    return this._data;
+  }
+}
+
+new Sample();
+
diff --git a/samples/grids/grid/cell-merge-custom-sample/tsconfig.json b/samples/grids/grid/cell-merge-custom-sample/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true,
+      "strictNullChecks": false,
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
diff --git a/samples/grids/grid/cell-merge-custom-sample/tslint.json b/samples/grids/grid/cell-merge-custom-sample/tslint.json
@@ -0,0 +1,53 @@
+{
+    "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+    "linterOptions": {
+      "exclude": [
+        "node_modules/**/*.ts",
+        "**/odatajs-4.0.0.js",
+        "src/images/*.*"
+      ]
+    },
+    "rules": {
+      "only-arrow-functions": false,
+      "jsx-self-close": false,
+      "jsx-wrap-multiline": false,
+      "no-var-requires": false,
+      "no-var": false,
+      "no-var-keyword": false,
+      "no-console": false,
+      "no-string-literal": false,
+      "no-unused-vars": false,
+      "@typescript-eslint/no-unused-vars": "off",
+      "jsx-no-lambda": false,
+      "ordered-imports": false,
+      "object-literal-sort-keys": false,
+      "object-literal-shorthand": false,
+      "member-ordering": false,
+      "curly": [false, "ignore-same-line"],
+      "max-classes-per-file": [true, 10],
+      "prefer-const": false,
+      "prefer-for-of": false,
+      "no-useless-constructor": false,
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/type-annotation-spacing": "off"
+    },
+    "jsRules": {
+      "only-arrow-functions": false,
+      "jsx-self-close": false,
+      "jsx-wrap-multiline": false,
+      "no-var-requires": false,
+      "no-console": false,
+      "no-unused-vars": false,
+      "@typescript-eslint/no-unused-vars": "off",
+      "jsx-no-lambda": false,
+      "ordered-imports": false,
+      "object-literal-sort-keys": false,
+      "object-literal-shorthand": false,
+      "curly": [false, "ignore-same-line"],
+      "max-classes-per-file": [true, 10],
+      "prefer-const": false,
+      "prefer-for-of": false,
+      "no-useless-constructor": false,
+      "@typescript-eslint/no-useless-constructor": "off"
+    }
+  }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/* shared styles are loaded from: */
		/* https://static.infragistics.com/xplatform/css/samples */