From b5f7c7d7bb1fabe91ba4b4862cf8ac01a4ce8958 Mon Sep 17 00:00:00 2001 From: ttonev Date: Sun, 21 Jul 2024 14:36:26 +0300 Subject: [PATCH 1/7] docs(grid): initial implementation excel style editing --- .../editing-excel-style copy/.eslintrc.js | 76 +++ .../grid/editing-excel-style copy/ReadMe.md | 56 ++ .../editing-excel-style copy/package.json | 49 ++ .../public/index.html | 11 + .../sandbox.config.json | 5 + .../editing-excel-style copy/src/NwindData.ts | 550 ++++++++++++++++++ .../editing-excel-style copy/src/index.css | 2 + .../editing-excel-style copy/src/index.tsx | 155 +++++ .../src/react-app-env.d.ts | 1 + .../editing-excel-style copy/tsconfig.json | 45 ++ 10 files changed, 950 insertions(+) create mode 100644 samples/grids/grid/editing-excel-style copy/.eslintrc.js create mode 100644 samples/grids/grid/editing-excel-style copy/ReadMe.md create mode 100644 samples/grids/grid/editing-excel-style copy/package.json create mode 100644 samples/grids/grid/editing-excel-style copy/public/index.html create mode 100644 samples/grids/grid/editing-excel-style copy/sandbox.config.json create mode 100644 samples/grids/grid/editing-excel-style copy/src/NwindData.ts create mode 100644 samples/grids/grid/editing-excel-style copy/src/index.css create mode 100644 samples/grids/grid/editing-excel-style copy/src/index.tsx create mode 100644 samples/grids/grid/editing-excel-style copy/src/react-app-env.d.ts create mode 100644 samples/grids/grid/editing-excel-style copy/tsconfig.json diff --git a/samples/grids/grid/editing-excel-style copy/.eslintrc.js b/samples/grids/grid/editing-excel-style copy/.eslintrc.js new file mode 100644 index 0000000000..9d283f6407 --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/.eslintrc.js @@ -0,0 +1,76 @@ +// 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", + "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-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" + } + } + ] + }; \ No newline at end of file diff --git a/samples/grids/grid/editing-excel-style copy/ReadMe.md b/samples/grids/grid/editing-excel-style copy/ReadMe.md new file mode 100644 index 0000000000..81253de014 --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Editing Excel Style feature using [Grid](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/grids/grid/editing-excel-style +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/grids/grid/editing-excel-style copy/package.json b/samples/grids/grid/editing-excel-style copy/package.json new file mode 100644 index 0000000000..00232b6565 --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/package.json @@ -0,0 +1,49 @@ +{ + "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": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject", + "lint": "eslint ./src/**/*.{ts,tsx}" + }, + "dependencies": { + "igniteui-dockmanager": "1.14.3", + "igniteui-react": "18.6.1-alpha.0", + "igniteui-react-core": "18.6.1-alpha.0", + "igniteui-react-datasources": "18.6.1-alpha.0", + "igniteui-react-grids": "18.6.1-alpha.0", + "igniteui-react-inputs": "18.6.1-alpha.0", + "igniteui-react-layouts": "18.6.1-alpha.0", + "igniteui-webcomponents": "4.9.0", + "lit-html": "^2.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "eslint": "^8.33.0", + "eslint-config-react": "^1.1.7", + "eslint-plugin-react": "^7.20.0", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/grids/grid/editing-excel-style copy/public/index.html b/samples/grids/grid/editing-excel-style copy/public/index.html new file mode 100644 index 0000000000..e2d3265576 --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/public/index.html @@ -0,0 +1,11 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + \ No newline at end of file diff --git a/samples/grids/grid/editing-excel-style copy/sandbox.config.json b/samples/grids/grid/editing-excel-style copy/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/grids/grid/editing-excel-style copy/src/NwindData.ts b/samples/grids/grid/editing-excel-style copy/src/NwindData.ts new file mode 100644 index 0000000000..54742f27c9 --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/src/NwindData.ts @@ -0,0 +1,550 @@ +export class NwindDataItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public ProductID: number; + public ProductName: string; + public SupplierID: number; + public CategoryID: number; + public QuantityPerUnit: string; + public UnitPrice: number; + public UnitsInStock: number; + public UnitsOnOrder: number; + public ReorderLevel: number; + public Discontinued: boolean; + public OrderDate: string; + public Rating: number; + public Locations: NwindDataItem_LocationsItem[]; + +} +export class NwindDataItem_LocationsItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public Shop: string; + public LastInventory: string; + +} +export class NwindData extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new NwindDataItem( + { + ProductID: 1, + ProductName: `Chai`, + SupplierID: 1, + CategoryID: 1, + QuantityPerUnit: `10 boxes x 20 bags`, + UnitPrice: 18, + UnitsInStock: 39, + UnitsOnOrder: 30, + ReorderLevel: 10, + Discontinued: false, + OrderDate: `2012-02-12`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 2, + ProductName: `Chang`, + SupplierID: 1, + CategoryID: 1, + QuantityPerUnit: `24 - 12 oz bottles`, + UnitPrice: 19, + UnitsInStock: 17, + UnitsOnOrder: 40, + ReorderLevel: 25, + Discontinued: true, + OrderDate: `2003-03-17`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 3, + ProductName: `Aniseed Syrup`, + SupplierID: 1, + CategoryID: 2, + QuantityPerUnit: `12 - 550 ml bottles`, + UnitPrice: 10, + UnitsInStock: 13, + UnitsOnOrder: 70, + ReorderLevel: 25, + Discontinued: false, + OrderDate: `2006-03-17`, + Rating: 3, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `24/7 Market`, + LastInventory: `2018-11-11` + })] + + }), + new NwindDataItem( + { + ProductID: 4, + ProductName: `Chef Antons Cajun Seasoning`, + SupplierID: 2, + CategoryID: 2, + QuantityPerUnit: `48 - 6 oz jars`, + UnitPrice: 22, + UnitsInStock: 53, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2016-03-17`, + Rating: 3, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + })] + + }), + new NwindDataItem( + { + ProductID: 5, + ProductName: `Chef Antons Gumbo Mix`, + SupplierID: 2, + CategoryID: 2, + QuantityPerUnit: `36 boxes`, + UnitPrice: 21.35, + UnitsInStock: 0, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: true, + OrderDate: `2011-11-11`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 6, + ProductName: `Grandmas Boysenberry Spread`, + SupplierID: 3, + CategoryID: 2, + QuantityPerUnit: `12 - 8 oz jars`, + UnitPrice: 25, + UnitsInStock: 0, + UnitsOnOrder: 30, + ReorderLevel: 25, + Discontinued: false, + OrderDate: `2017-12-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 7, + ProductName: `Uncle Bobs Organic Dried Pears`, + SupplierID: 3, + CategoryID: 7, + QuantityPerUnit: `12 - 1 lb pkgs.`, + UnitPrice: 30, + UnitsInStock: 150, + UnitsOnOrder: 30, + ReorderLevel: 10, + Discontinued: false, + OrderDate: `2016-07-17`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + })] + + }), + new NwindDataItem( + { + ProductID: 8, + ProductName: `Northwoods Cranberry Sauce`, + SupplierID: 3, + CategoryID: 2, + QuantityPerUnit: `12 - 12 oz jars`, + UnitPrice: 40, + UnitsInStock: 6, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2018-01-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 9, + ProductName: `Mishi Kobe Niku`, + SupplierID: 4, + CategoryID: 6, + QuantityPerUnit: `18 - 500 g pkgs.`, + UnitPrice: 97, + UnitsInStock: 29, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: true, + OrderDate: `2010-02-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 10, + ProductName: `Ikura`, + SupplierID: 4, + CategoryID: 8, + QuantityPerUnit: `12 - 200 ml jars`, + UnitPrice: 31, + UnitsInStock: 31, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2008-05-17`, + Rating: 3, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Wall Market`, + LastInventory: `2018-12-06` + })] + + }), + new NwindDataItem( + { + ProductID: 11, + ProductName: `Queso Cabrales`, + SupplierID: 5, + CategoryID: 4, + QuantityPerUnit: `1 kg pkg.`, + UnitPrice: 21, + UnitsInStock: 22, + UnitsOnOrder: 30, + ReorderLevel: 30, + Discontinued: false, + OrderDate: `2009-01-17`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Fun-Tasty Co.`, + LastInventory: `2018-06-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 12, + ProductName: `Queso Manchego La Pastora`, + SupplierID: 5, + CategoryID: 4, + QuantityPerUnit: `10 - 500 g pkgs.`, + UnitPrice: 38, + UnitsInStock: 86, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2015-11-17`, + Rating: 3, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 13, + ProductName: `Konbu`, + SupplierID: 6, + CategoryID: 8, + QuantityPerUnit: `2 kg box`, + UnitPrice: 6, + UnitsInStock: 24, + UnitsOnOrder: 30, + ReorderLevel: 5, + Discontinued: false, + OrderDate: `2015-03-17`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 14, + ProductName: `Tofu`, + SupplierID: 6, + CategoryID: 7, + QuantityPerUnit: `40 - 100 g pkgs.`, + UnitPrice: 23.25, + UnitsInStock: 35, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2017-06-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + })] + + }), + new NwindDataItem( + { + ProductID: 15, + ProductName: `Genen Shouyu`, + SupplierID: 6, + CategoryID: 2, + QuantityPerUnit: `24 - 250 ml bottles`, + UnitPrice: 15.5, + UnitsInStock: 39, + UnitsOnOrder: 30, + ReorderLevel: 5, + Discontinued: false, + OrderDate: `2014-03-17`, + Rating: 4, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Local Market`, + LastInventory: `2018-07-03` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Wall Market`, + LastInventory: `2018-12-06` + })] + + }), + new NwindDataItem( + { + ProductID: 16, + ProductName: `Pavlova`, + SupplierID: 7, + CategoryID: 3, + QuantityPerUnit: `32 - 500 g boxes`, + UnitPrice: 17.45, + UnitsInStock: 29, + UnitsOnOrder: 30, + ReorderLevel: 10, + Discontinued: false, + OrderDate: `2018-03-28`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Street Market`, + LastInventory: `2018-12-12` + }), + new NwindDataItem_LocationsItem( + { + Shop: `24/7 Market`, + LastInventory: `2018-11-11` + })] + + }), + new NwindDataItem( + { + ProductID: 17, + ProductName: `Alice Mutton`, + SupplierID: 7, + CategoryID: 6, + QuantityPerUnit: `20 - 1 kg tins`, + UnitPrice: 39, + UnitsInStock: 0, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: true, + OrderDate: `2015-08-17`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Farmer Market`, + LastInventory: `2018-04-04` + })] + + }), + new NwindDataItem( + { + ProductID: 18, + ProductName: `Carnarvon Tigers`, + SupplierID: 7, + CategoryID: 8, + QuantityPerUnit: `16 kg pkg.`, + UnitPrice: 62.5, + UnitsInStock: 42, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2005-09-27`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `24/7 Market`, + LastInventory: `2018-11-11` + }), + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + new NwindDataItem( + { + ProductID: 19, + ProductName: `Teatime Chocolate Biscuits`, + SupplierID: 8, + CategoryID: 3, + QuantityPerUnit: ``, + UnitPrice: 9.2, + UnitsInStock: 25, + UnitsOnOrder: 30, + ReorderLevel: 5, + Discontinued: false, + OrderDate: `2001-03-17`, + Rating: 2, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Local Market`, + LastInventory: `2018-07-03` + })] + + }), + new NwindDataItem( + { + ProductID: 20, + ProductName: `Sir Rodneys Marmalade`, + SupplierID: 8, + CategoryID: 3, + QuantityPerUnit: `4 - 100 ml jars`, + UnitPrice: 4.5, + UnitsInStock: 40, + UnitsOnOrder: 30, + ReorderLevel: 0, + Discontinued: false, + OrderDate: `2005-03-17`, + Rating: 5, + Locations: [ + new NwindDataItem_LocationsItem( + { + Shop: `Super Market`, + LastInventory: `2018-09-09` + })] + + }), + ]; + super(...(newItems.slice(0, items))); + } + } +} diff --git a/samples/grids/grid/editing-excel-style copy/src/index.css b/samples/grids/grid/editing-excel-style copy/src/index.css new file mode 100644 index 0000000000..98682b8543 --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/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/editing-excel-style copy/src/index.tsx b/samples/grids/grid/editing-excel-style copy/src/index.tsx new file mode 100644 index 0000000000..c76bbd305a --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/src/index.tsx @@ -0,0 +1,155 @@ +import React, { useEffect, useRef, useState } from "react"; +import ReactDOM from 'react-dom/client'; +import './index.css'; + +import { IgrGridModule } from 'igniteui-react-grids'; +import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; +import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-react-core'; +import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData'; +import { IgrGridKeydownEventArgs } from 'igniteui-react-grids'; + +import 'igniteui-react-grids/grids/combined'; +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +const mods: any[] = [ + IgrGridModule +]; +mods.forEach((m) => m.register()); + +export default class Sample extends React.Component { + private grid1Ref: React.RefObject = React.createRef(); + + constructor(props: any) { + super(props); + this.webGridEditingExcelStyle = this.webGridEditingExcelStyle.bind(this); + this.handleKeyDown = this.handleKeyDown.bind(this); + } + + componentDidMount() { + const gridElement = this.grid1Ref.current; + if (!gridElement) { + console.error("Grid element is not found."); + } + } + + componentWillUnmount() { + // No need for cleanup as React handles it + } + + private handleKeyDown(event: React.KeyboardEvent) { + console.log("Key pressed:", event.key); + this.webGridEditingExcelStyle(this.grid1Ref.current, event); + } + + + public render(): JSX.Element { + return ( +
+
+ + +
+
+ ); + } + + private _nwindData: NwindData = null; + public get nwindData(): NwindData { + if (this._nwindData == null) + { + this._nwindData = new NwindData(); + } + return this._nwindData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + WebGridDescriptionModule.register(context); + } + return this._componentRenderer; + } + + private webGridEditingExcelStyle(sender: IgrGrid, args: React.KeyboardEvent): void { + var key = args.key; + var grid1 = this.grid1Ref.current; + var code = args.code; + console.log('keydown: ' + key + ' ' + code); + var activeElem = grid1.selectedCells[0]; + + if(key === 'Escape') { + activeElem.editMode = false; + return; + } + + if ((key >= '0' && key <= '9') || (key.toLowerCase() >= 'a' && key.toLowerCase() <= 'z') && key != 'Enter') { + + if (activeElem && activeElem.editMode === false) { + activeElem.value = key; + + activeElem.editMode = true; + grid1.markForCheck(); + } + const inputElem = document.activeElement as HTMLInputElement; + if (inputElem && inputElem.tagName.toLowerCase() === 'input') { + if (inputElem.type === 'number') { + inputElem.type = 'text'; + inputElem.setSelectionRange(inputElem.value.length, inputElem.value.length); + inputElem.type = 'number'; + } else { + inputElem.selectionStart = inputElem.selectionEnd = inputElem.value.length; + } + } + } + + if (key === 'Enter') { + + if(activeElem == null) { + return; + } + var nextRowIndex = activeElem.row.index + 1; + if(args.shiftKey) { + nextRowIndex = activeElem.row.index - 1; + } + const maxRows = grid1.data.length; + if (nextRowIndex >= maxRows) { + nextRowIndex--; + } + if(nextRowIndex < 0) { + nextRowIndex = 0; + } + + grid1.navigateTo(nextRowIndex, activeElem.column.colEnd, (obj: any) => { + grid1.clearCellSelection(); + obj.target.activate(); + }); + } + } + + public getNextEditableRowIndex(currentRowIndex: number, dataView: any, previous: boolean) { + if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) { + return currentRowIndex; + } + if (previous) { + return dataView.findLastIndex((rec: any, index: number) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)); + } + return dataView.findIndex((rec: any, index: number) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)); + } + + public isEditableDataRecordAtIndex(dataViewIndex: number, dataView: any) { + const rec = dataView[dataViewIndex]; + return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData; + } + +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/samples/grids/grid/editing-excel-style copy/src/react-app-env.d.ts b/samples/grids/grid/editing-excel-style copy/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/grids/grid/editing-excel-style copy/tsconfig.json b/samples/grids/grid/editing-excel-style copy/tsconfig.json new file mode 100644 index 0000000000..42c6ace1da --- /dev/null +++ b/samples/grids/grid/editing-excel-style copy/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} From 8d7dca925536a50b5b89cf0f124bf17bec9c9026 Mon Sep 17 00:00:00 2001 From: ttonev Date: Tue, 23 Jul 2024 10:18:56 +0300 Subject: [PATCH 2/7] docs(grid): initial excel style editing sample --- .../.eslintrc.js | 0 .../ReadMe.md | 0 .../package.json | 0 .../public/index.html | 0 .../sandbox.config.json | 0 .../src/NwindData.ts | 0 .../src/index.css | 0 .../src/index.tsx | 0 .../src/react-app-env.d.ts | 0 .../tsconfig.json | 0 10 files changed, 0 insertions(+), 0 deletions(-) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/.eslintrc.js (100%) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/ReadMe.md (100%) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/package.json (100%) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/public/index.html (100%) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/sandbox.config.json (100%) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/src/NwindData.ts (100%) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/src/index.css (100%) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/src/index.tsx (100%) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/src/react-app-env.d.ts (100%) rename samples/grids/grid/{editing-excel-style copy => editing-excel-style-custom}/tsconfig.json (100%) diff --git a/samples/grids/grid/editing-excel-style copy/.eslintrc.js b/samples/grids/grid/editing-excel-style-custom/.eslintrc.js similarity index 100% rename from samples/grids/grid/editing-excel-style copy/.eslintrc.js rename to samples/grids/grid/editing-excel-style-custom/.eslintrc.js diff --git a/samples/grids/grid/editing-excel-style copy/ReadMe.md b/samples/grids/grid/editing-excel-style-custom/ReadMe.md similarity index 100% rename from samples/grids/grid/editing-excel-style copy/ReadMe.md rename to samples/grids/grid/editing-excel-style-custom/ReadMe.md diff --git a/samples/grids/grid/editing-excel-style copy/package.json b/samples/grids/grid/editing-excel-style-custom/package.json similarity index 100% rename from samples/grids/grid/editing-excel-style copy/package.json rename to samples/grids/grid/editing-excel-style-custom/package.json diff --git a/samples/grids/grid/editing-excel-style copy/public/index.html b/samples/grids/grid/editing-excel-style-custom/public/index.html similarity index 100% rename from samples/grids/grid/editing-excel-style copy/public/index.html rename to samples/grids/grid/editing-excel-style-custom/public/index.html diff --git a/samples/grids/grid/editing-excel-style copy/sandbox.config.json b/samples/grids/grid/editing-excel-style-custom/sandbox.config.json similarity index 100% rename from samples/grids/grid/editing-excel-style copy/sandbox.config.json rename to samples/grids/grid/editing-excel-style-custom/sandbox.config.json diff --git a/samples/grids/grid/editing-excel-style copy/src/NwindData.ts b/samples/grids/grid/editing-excel-style-custom/src/NwindData.ts similarity index 100% rename from samples/grids/grid/editing-excel-style copy/src/NwindData.ts rename to samples/grids/grid/editing-excel-style-custom/src/NwindData.ts diff --git a/samples/grids/grid/editing-excel-style copy/src/index.css b/samples/grids/grid/editing-excel-style-custom/src/index.css similarity index 100% rename from samples/grids/grid/editing-excel-style copy/src/index.css rename to samples/grids/grid/editing-excel-style-custom/src/index.css diff --git a/samples/grids/grid/editing-excel-style copy/src/index.tsx b/samples/grids/grid/editing-excel-style-custom/src/index.tsx similarity index 100% rename from samples/grids/grid/editing-excel-style copy/src/index.tsx rename to samples/grids/grid/editing-excel-style-custom/src/index.tsx diff --git a/samples/grids/grid/editing-excel-style copy/src/react-app-env.d.ts b/samples/grids/grid/editing-excel-style-custom/src/react-app-env.d.ts similarity index 100% rename from samples/grids/grid/editing-excel-style copy/src/react-app-env.d.ts rename to samples/grids/grid/editing-excel-style-custom/src/react-app-env.d.ts diff --git a/samples/grids/grid/editing-excel-style copy/tsconfig.json b/samples/grids/grid/editing-excel-style-custom/tsconfig.json similarity index 100% rename from samples/grids/grid/editing-excel-style copy/tsconfig.json rename to samples/grids/grid/editing-excel-style-custom/tsconfig.json From 3618842679f161ef9c336f550ddff5ba361ce895 Mon Sep 17 00:00:00 2001 From: ttonev Date: Tue, 23 Jul 2024 15:14:25 +0300 Subject: [PATCH 3/7] docs(grid): updated sample --- .../editing-excel-style-custom/src/index.tsx | 121 +++++++++--------- 1 file changed, 63 insertions(+), 58 deletions(-) diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.tsx b/samples/grids/grid/editing-excel-style-custom/src/index.tsx index c76bbd305a..af85467451 100644 --- a/samples/grids/grid/editing-excel-style-custom/src/index.tsx +++ b/samples/grids/grid/editing-excel-style-custom/src/index.tsx @@ -18,11 +18,13 @@ mods.forEach((m) => m.register()); export default class Sample extends React.Component { private grid1Ref: React.RefObject = React.createRef(); + private shouldAppendValue: boolean = false; constructor(props: any) { super(props); this.webGridEditingExcelStyle = this.webGridEditingExcelStyle.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); + this.onActiveNodeChange = this.onActiveNodeChange.bind(this); } componentDidMount() { @@ -37,16 +39,23 @@ export default class Sample extends React.Component { } private handleKeyDown(event: React.KeyboardEvent) { - console.log("Key pressed:", event.key); this.webGridEditingExcelStyle(this.grid1Ref.current, event); } + + private onActiveNodeChange = (args: any) => { + this.grid1Ref.current.endEdit(true, args); + var grid = document.querySelector(".igx-grid__tbody-content") as HTMLElement; + if(grid){ + grid.focus(); + } + } public render(): JSX.Element { return (
- +