IgniteUI · tishko0 · Feb 16, 2026
diff --git a/samples/grids/grid/batch-editing-grid-remote-paging/.prettierrc b/samples/grids/grid/batch-editing-grid-remote-paging/.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/batch-editing-grid-remote-paging/ReadMe.md b/samples/grids/grid/batch-editing-grid-remote-paging/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 Remote Paging Grid 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://dl.infragistics.com/x/img/browsers/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://dl.infragistics.com/x/img/browsers/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/grids/grid/remote-paging-grid" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/grids/grid/remote-paging-grid?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://dl.infragistics.com/x/img/browsers/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/remote-paging-grid
+```
+
+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/batch-editing-grid-remote-paging/index.html b/samples/grids/grid/batch-editing-grid-remote-paging/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample | Ignite UI | Web Components | infragistics</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/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://dl.infragistics.com/x/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"
+        name="grid"
+        id="grid"
+        moving="true"
+        primary-key="customerId"
+        row-editable="true"
+        batch-editing="true"
+        paging-mode="Remote">
+            <igc-paginator
+              id="paginator">
+            </igc-paginator>
+            <igc-column
+              header="Actions"
+              width="120px"
+              id="actionsColumn">
+            </igc-column>
+            <igc-column
+              name="customerId"
+              id="customerId"
+              field="customerId"
+              header="Customer ID"
+              data-type="string"
+              editable="false">
+            </igc-column>
+            <igc-column
+              name="companyName"
+              id="companyName"
+              field="companyName"
+              header="Company Name"
+              data-type="string"
+              editable="true">
+            </igc-column>
+            <igc-column
+              name="contactName"
+              id="contactName"
+              field="contactName"
+              header="Contact Name"
+              data-type="string"
+              editable="true">
+            </igc-column>
+            <igc-column
+              name="contactTitle"
+              id="contactTitle"
+              field="contactTitle"
+              header="Contact Title"
+              data-type="string"
+              editable="true">
+            </igc-column>
+            <igc-column
+              name="address?.country"
+              id="address.country"
+              field="address.country"
+              header="Country"
+              data-type="string"
+              editable="true">
+            </igc-column>
+            <igc-column
+              name="address.phone"
+              id="address.phone"
+              field="address.phone"
+              header="Phone"
+              data-type="string"
+              editable="true">
+            </igc-column>
+        </igc-grid>
+    </div>
+    <div class="buttons-wrapper">
+      <igc-button id="addRowBtn" variant="contained">Add Row</igc-button>
+      <div class="buttons-right">
+        <igc-button id="undoBtn" variant="outlined" disabled>Undo</igc-button>
+        <igc-button id="redoBtn" variant="outlined" disabled>Redo</igc-button>
+        <igc-button id="discardBtn" variant="outlined" disabled>Discard</igc-button>
+        <igc-button id="commitBtn" variant="outlined" disabled>Commit</igc-button>
+      </div>
+    </div>
+
+    <igc-dialog id="dialog" title="Transactions">
+      <igc-grid
+        id="transactionGrid"
+        auto-generate="false"
+        width="600px"
+        height="300px">
+        <igc-column field="id" header="ID" data-type="string"></igc-column>
+        <igc-column field="type" header="Type" data-type="string" id="typeColumn"></igc-column>
+        <igc-column field="newValue" header="Value" data-type="string" id="valueColumn"></igc-column>
+      </igc-grid>
+      <div slot="footer" class="dialog-buttons">
+        <igc-button id="dialogCommitBtn" variant="contained">Commit</igc-button>
+        <igc-button id="dialogDiscardBtn" variant="outlined">Discard</igc-button>
+        <igc-button id="dialogCancelBtn" variant="flat">Cancel</igc-button>
+      </div>
+    </igc-dialog>
+</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>
diff --git a/samples/grids/grid/batch-editing-grid-remote-paging/package.json b/samples/grids/grid/batch-editing-grid-remote-paging/package.json
@@ -0,0 +1,63 @@
+{
+  "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": "6.3.1",
+    "igniteui-webcomponents-grids": "6.3.0-alpha.1",
+    "igniteui-webcomponents-inputs": "6.3.1",
+    "igniteui-webcomponents-layouts": "6.3.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/batch-editing-grid-remote-paging/sandbox.config.json b/samples/grids/grid/batch-editing-grid-remote-paging/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+
diff --git a/samples/grids/grid/batch-editing-grid-remote-paging/src/CustomersWithPageResponseModel.ts b/samples/grids/grid/batch-editing-grid-remote-paging/src/CustomersWithPageResponseModel.ts
@@ -0,0 +1,7 @@
+export interface CustomersWithPageResponseModel {
+    items: any[];
+    totalRecordsCount: number;
+    pageSize: number;
+    pageNumber: number;
+    totalPages: number;
+}
diff --git a/samples/grids/grid/batch-editing-grid-remote-paging/src/RemotePagingService.ts b/samples/grids/grid/batch-editing-grid-remote-paging/src/RemotePagingService.ts
@@ -0,0 +1,31 @@
+export class RemotePagingService {
+    public static CUSTOMERS_URL = `https://data-northwind.indigo.design/Customers/GetCustomersWithPage`;
+    constructor() {}
+
+    public static getDataWithPaging(pageIndex?: number, pageSize?: number) {
+        return fetch(RemotePagingService.buildUrl(RemotePagingService.CUSTOMERS_URL, pageIndex, pageSize))
+        .then((result) => result.json())
+        .catch((error) => console.error(error.message));
+    }
+
+    private static buildUrl(baseUrl: string, pageIndex?: number, pageSize?: number) {
+        let qS = "";
+        if (baseUrl) {
+                qS += `${baseUrl}`;
+        }
+
+        // Add pageIndex and size to the query string if they are defined
+        if (pageIndex !== undefined) {
+            qS += `?pageIndex=${pageIndex}`;
+            if (pageSize !== undefined) {
+                qS += `&size=${pageSize}`;
+            }
+        } else if (pageSize !== undefined) {
+            qS += `?perPage=${pageSize}`;
+        }
+
+        return `${qS}`;
+    }
+}
+
+
diff --git a/samples/grids/grid/batch-editing-grid-remote-paging/src/index.css b/samples/grids/grid/batch-editing-grid-remote-paging/src/index.css
@@ -0,0 +1,39 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+#grid {
+    --ig-size: var(--ig-size-medium);
+}
+
+.buttons-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px 0;
+}
+
+.buttons-right {
+    display: flex;
+    gap: 8px;
+}
+
+.dialog-buttons {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.transaction--add {
+    color: #6b3;
+    font-weight: 600;
+}
+
+.transaction--update {
+    color: #4a71b9;
+    font-weight: 600;
+}
+
+.transaction--delete {
+    color: #ee4920;
+    font-weight: 600;
+}