Added batch-editing overview samples

samples/grids/grid/grid-batch-editing-remote/.devcontainer/devcontainer.json

@@ -0,0 +1,4 @@
+{
+    "name": "Node.js",
+    "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}

samples/grids/grid/grid-batch-editing-remote/.eslintrc.js

@@ -0,0 +1,78 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "no-mixed-spaces-and-tabs": 0,
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+	    "no-mixed-spaces-and-tabs": 0,
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };

samples/grids/grid/grid-batch-editing-remote/ReadMe.md

@@ -0,0 +1,18 @@
+# Grid Batch Editing with Remote Paging Sample
+
+This sample demonstrates how to use batch editing with remote paging in the Ignite UI for React Grid component.
+
+## Features
+
+- Remote paging with simulated network delay
+- Batch editing (add, edit, delete rows)
+- Undo/Redo support
+- Transaction dialog showing pending changes
+- Commit/Discard functionality
+
+## Running the Sample
+
+```bash
+npm install
+npm start
+```

samples/grids/grid/grid-batch-editing-remote/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/react.png" >
+    <link rel="stylesheet"    href="https://dl.infragistics.com/x/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

samples/grids/grid/grid-batch-editing-remote/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "vite --port 4200",
+    "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-dockmanager": "^1.17.0",
+    "igniteui-react": "^19.4.0",
+    "igniteui-react-core": "19.3.1",
+    "igniteui-react-grids": "^19.5.0-beta.0",
+    "igniteui-react-inputs": "19.3.1",
+    "igniteui-react-layouts": "19.3.1",
+    "igniteui-webcomponents": "^6.3.0",
+    "lit-html": "^3.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^24.7.1",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/browser": "^3.2.4",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "typescript": "^4.8.4",
+    "vite": "^7.1.9",
+    "vitest": "^3.2.4",
+    "vitest-canvas-mock": "^0.3.3",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

samples/grids/grid/grid-batch-editing-remote/sandbox.config.json

@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}

samples/grids/grid/grid-batch-editing-remote/src/ProductsWithPageResponseModel.ts

@@ -0,0 +1,7 @@
+export interface ProductsWithPageResponseModel {
+    items: any[];
+    totalRecordsCount: number;
+    pageSize: number;
+    pageNumber: number;
+    totalPages: number;
+}

samples/grids/grid/grid-batch-editing-remote/src/RemotePagingService.ts

@@ -0,0 +1,54 @@
+import { ProductsWithPageResponseModel } from './ProductsWithPageResponseModel';
+
+// Simulated remote data - in a real app, this would come from an API
+const ALL_PRODUCTS = [
+    { ProductID: 1, ProductName: 'Chai', SupplierID: 1, CategoryID: 1, QuantityPerUnit: '10 boxes x 20 bags', UnitPrice: 18, UnitsInStock: 39, UnitsOnOrder: 30, ReorderLevel: 10, Discontinued: false },
+    { ProductID: 2, ProductName: 'Chang', SupplierID: 1, CategoryID: 1, QuantityPerUnit: '24 - 12 oz bottles', UnitPrice: 19, UnitsInStock: 17, UnitsOnOrder: 40, ReorderLevel: 25, Discontinued: true },
+    { ProductID: 3, ProductName: 'Aniseed Syrup', SupplierID: 1, CategoryID: 2, QuantityPerUnit: '12 - 550 ml bottles', UnitPrice: 10, UnitsInStock: 13, UnitsOnOrder: 70, ReorderLevel: 25, Discontinued: false },
+    { ProductID: 4, ProductName: 'Chef Anton\'s Cajun Seasoning', SupplierID: 2, CategoryID: 2, QuantityPerUnit: '48 - 6 oz jars', UnitPrice: 22, UnitsInStock: 53, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false },
+    { ProductID: 5, ProductName: 'Chef Anton\'s Gumbo Mix', SupplierID: 2, CategoryID: 2, QuantityPerUnit: '36 boxes', UnitPrice: 21.35, UnitsInStock: 0, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: true },
+    { ProductID: 6, ProductName: 'Grandma\'s Boysenberry Spread', SupplierID: 3, CategoryID: 2, QuantityPerUnit: '12 - 8 oz jars', UnitPrice: 25, UnitsInStock: 120, UnitsOnOrder: 0, ReorderLevel: 25, Discontinued: false },
+    { ProductID: 7, ProductName: 'Uncle Bob\'s Organic Dried Pears', SupplierID: 3, CategoryID: 7, QuantityPerUnit: '12 - 1 lb pkgs.', UnitPrice: 30, UnitsInStock: 15, UnitsOnOrder: 0, ReorderLevel: 10, Discontinued: false },
+    { ProductID: 8, ProductName: 'Northwoods Cranberry Sauce', SupplierID: 3, CategoryID: 2, QuantityPerUnit: '12 - 12 oz jars', UnitPrice: 40, UnitsInStock: 6, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false },
+    { ProductID: 9, ProductName: 'Mishi Kobe Niku', SupplierID: 4, CategoryID: 6, QuantityPerUnit: '18 - 500 g pkgs.', UnitPrice: 97, UnitsInStock: 29, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: true },
+    { ProductID: 10, ProductName: 'Ikura', SupplierID: 4, CategoryID: 8, QuantityPerUnit: '12 - 200 ml jars', UnitPrice: 31, UnitsInStock: 31, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false },
+    { ProductID: 11, ProductName: 'Queso Cabrales', SupplierID: 5, CategoryID: 4, QuantityPerUnit: '1 kg pkg.', UnitPrice: 21, UnitsInStock: 22, UnitsOnOrder: 30, ReorderLevel: 30, Discontinued: false },
+    { ProductID: 12, ProductName: 'Queso Manchego La Pastora', SupplierID: 5, CategoryID: 4, QuantityPerUnit: '10 - 500 g pkgs.', UnitPrice: 38, UnitsInStock: 86, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false },
+    { ProductID: 13, ProductName: 'Konbu', SupplierID: 6, CategoryID: 8, QuantityPerUnit: '2 kg box', UnitPrice: 6, UnitsInStock: 24, UnitsOnOrder: 0, ReorderLevel: 5, Discontinued: false },
+    { ProductID: 14, ProductName: 'Tofu', SupplierID: 6, CategoryID: 7, QuantityPerUnit: '40 - 100 g pkgs.', UnitPrice: 23.25, UnitsInStock: 35, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false },
+    { ProductID: 15, ProductName: 'Genen Shouyu', SupplierID: 6, CategoryID: 2, QuantityPerUnit: '24 - 250 ml bottles', UnitPrice: 15.5, UnitsInStock: 39, UnitsOnOrder: 0, ReorderLevel: 5, Discontinued: false },
+    { ProductID: 16, ProductName: 'Pavlova', SupplierID: 7, CategoryID: 3, QuantityPerUnit: '32 - 500 g boxes', UnitPrice: 17.45, UnitsInStock: 29, UnitsOnOrder: 0, ReorderLevel: 10, Discontinued: false },
+    { ProductID: 17, ProductName: 'Alice Mutton', SupplierID: 7, CategoryID: 6, QuantityPerUnit: '20 - 1 kg tins', UnitPrice: 39, UnitsInStock: 0, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: true },
+    { ProductID: 18, ProductName: 'Carnarvon Tigers', SupplierID: 7, CategoryID: 8, QuantityPerUnit: '16 kg pkg.', UnitPrice: 62.5, UnitsInStock: 42, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false },
+    { ProductID: 19, ProductName: 'Teatime Chocolate Biscuits', SupplierID: 8, CategoryID: 3, QuantityPerUnit: '10 boxes x 12 pieces', UnitPrice: 9.2, UnitsInStock: 25, UnitsOnOrder: 0, ReorderLevel: 5, Discontinued: false },
+    { ProductID: 20, ProductName: 'Sir Rodney\'s Marmalade', SupplierID: 8, CategoryID: 3, QuantityPerUnit: '30 gift boxes', UnitPrice: 81, UnitsInStock: 40, UnitsOnOrder: 0, ReorderLevel: 0, Discontinued: false },
+];
+
+export class RemotePagingService {
+    private static delay(ms: number): Promise<void> {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    public static async getDataWithPaging(pageIndex: number = 0, pageSize: number = 10): Promise<ProductsWithPageResponseModel> {
+        // Simulate network delay
+        await this.delay(300);
+
+        const totalRecords = ALL_PRODUCTS.length;
+        const totalPages = Math.ceil(totalRecords / pageSize);
+        const startIndex = pageIndex * pageSize;
+        const endIndex = Math.min(startIndex + pageSize, totalRecords);
+        const items = ALL_PRODUCTS.slice(startIndex, endIndex);
+
+        return {
+            items,
+            totalRecordsCount: totalRecords,
+            pageSize,
+            pageNumber: pageIndex,
+            totalPages
+        };
+    }
+
+    public static getTotalRecords(): number {
+        return ALL_PRODUCTS.length;
+    }
+}

samples/grids/grid/grid-batch-editing-remote/src/index.css

@@ -0,0 +1,44 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+.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;
+}
+
+.error-banner {
+    background-color: #fee;
+    border: 1px solid #fcc;
+    border-radius: 4px;
+    color: #c00;
+    padding: 10px 15px;
+    margin-bottom: 10px;
+}