From 04babcfd48cc3f2ac64eca48e992f5684fa454cf Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Mon, 8 Jul 2024 21:30:07 +0300
Subject: [PATCH 01/10] docs(grid): new implementation of excel style editing
---
.../editing-excel-style-custom/.prettierrc | 11 +
.../grid/editing-excel-style-custom/ReadMe.md | 56 ++
.../editing-excel-style-custom/index.html | 69 +++
.../editing-excel-style-custom/package.json | 62 ++
.../sandbox.config.json | 6 +
.../src/NwindData.ts | 550 ++++++++++++++++++
.../editing-excel-style-custom/src/index.css | 3 +
.../editing-excel-style-custom/src/index.ts | 83 +++
.../editing-excel-style-custom/tsconfig.json | 40 ++
.../editing-excel-style-custom/tslint.json | 54 ++
.../webpack.config.js | 105 ++++
11 files changed, 1039 insertions(+)
create mode 100644 samples/grids/grid/editing-excel-style-custom/.prettierrc
create mode 100644 samples/grids/grid/editing-excel-style-custom/ReadMe.md
create mode 100644 samples/grids/grid/editing-excel-style-custom/index.html
create mode 100644 samples/grids/grid/editing-excel-style-custom/package.json
create mode 100644 samples/grids/grid/editing-excel-style-custom/sandbox.config.json
create mode 100644 samples/grids/grid/editing-excel-style-custom/src/NwindData.ts
create mode 100644 samples/grids/grid/editing-excel-style-custom/src/index.css
create mode 100644 samples/grids/grid/editing-excel-style-custom/src/index.ts
create mode 100644 samples/grids/grid/editing-excel-style-custom/tsconfig.json
create mode 100644 samples/grids/grid/editing-excel-style-custom/tslint.json
create mode 100644 samples/grids/grid/editing-excel-style-custom/webpack.config.js
diff --git a/samples/grids/grid/editing-excel-style-custom/.prettierrc b/samples/grids/grid/editing-excel-style-custom/.prettierrc
new file mode 100644
index 0000000000..15a7c7c6cf
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/.prettierrc
@@ -0,0 +1,11 @@
+{
+ "printWidth": 250,
+ "tabWidth": 4,
+ "useTabs": false,
+ "semi": true,
+ "singleQuote": false,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "fluid": false
+}
\ No newline at end of file
diff --git a/samples/grids/grid/editing-excel-style-custom/ReadMe.md b/samples/grids/grid/editing-excel-style-custom/ReadMe.md
new file mode 100644
index 0000000000..a2dee166a6
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/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 Editing Excel Style 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/editing-excel-style" 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/editing-excel-style?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/editing-excel-style
+```
+
+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/editing-excel-style-custom/index.html b/samples/grids/grid/editing-excel-style-custom/index.html
new file mode 100644
index 0000000000..7342edd4c2
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Sample | Ignite UI | Web Components | infragistics</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"
+ primary-key="ProductID"
+ name="grid1"
+ id="grid1">
+ <igc-column
+ field="ProductID"
+ header="Product ID"
+ editable="true"
+ groupable="true"
+ hidden="true">
+ </igc-column>
+ <igc-column
+ field="ProductName"
+ header="Product Name"
+ data-type="string"
+ editable="true">
+ </igc-column>
+ <igc-column
+ field="UnitPrice"
+ header="Unit Price"
+ data-type="number"
+ editable="true">
+ </igc-column>
+ <igc-column
+ field="QuantityPerUnit"
+ header="Quantity Per Unit"
+ groupable="true"
+ data-type="string"
+ editable="true">
+ </igc-column>
+ <igc-column
+ field="ReorderLevel"
+ header="Reorder Level"
+ data-type="number"
+ groupable="true"
+ editable="true">
+ </igc-column>
+ </igc-grid>
+ </div>
+</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>
\ No newline at end of file
diff --git a/samples/grids/grid/editing-excel-style-custom/package.json b/samples/grids/grid/editing-excel-style-custom/package.json
new file mode 100644
index 0000000000..ebfc697640
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/package.json
@@ -0,0 +1,62 @@
+{
+ "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": "4.8.1",
+ "igniteui-webcomponents-grids": "4.8.1",
+ "igniteui-webcomponents-inputs": "4.8.1",
+ "igniteui-webcomponents-layouts": "4.8.1",
+ "lit-html": "^2.2.0",
+ "tslib": "^2.0.0"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.8.3",
+ "@babel/core": "^7.8.3",
+ "@babel/plugin-proposal-class-properties": "^7.8.3",
+ "@babel/plugin-transform-runtime": "^7.10.0",
+ "@babel/preset-env": "^7.8.3",
+ "@babel/preset-typescript": "^7.8.3",
+ "@types/source-map": "^0.5.7",
+ "babel-loader": "^8.1.0",
+ "babel-plugin-transform-custom-element-classes": "^0.1.0",
+ "css-loader": "^1.0.0",
+ "csv-loader": "^3.0.2",
+ "file-loader": "^4.2.0",
+ "fork-ts-checker-webpack-plugin": "^4.1.5",
+ "html-webpack-plugin": "^4.3.0",
+ "parcel-bundler": "^1.6.1",
+ "source-map": "^0.7.3",
+ "style-loader": "^0.22.1",
+ "tsconfig-paths-webpack-plugin": "^4.0.0",
+ "typescript": "^4.4.4",
+ "webpack": "^5.74.0",
+ "webpack-cli": "^4.10.0",
+ "webpack-dev-server": "^4.11.1",
+ "worker-loader": "^3.0.8",
+ "xml-loader": "^1.2.1"
+ }
+}
diff --git a/samples/grids/grid/editing-excel-style-custom/sandbox.config.json b/samples/grids/grid/editing-excel-style-custom/sandbox.config.json
new file mode 100644
index 0000000000..52c7875103
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/sandbox.config.json
@@ -0,0 +1,6 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser",
+ "template": "parcel"
+}
\ No newline at end of file
diff --git a/samples/grids/grid/editing-excel-style-custom/src/NwindData.ts b/samples/grids/grid/editing-excel-style-custom/src/NwindData.ts
new file mode 100644
index 0000000000..f59afd0b79
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/src/NwindData.ts
@@ -0,0 +1,550 @@
+export class NwindDataItem {
+ public constructor(init: Partial<NwindDataItem>) {
+ 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<NwindDataItem_LocationsItem>) {
+ Object.assign(this, init);
+ }
+
+ public Shop: string;
+ public LastInventory: string;
+
+}
+export class NwindData extends Array<NwindDataItem> {
+ public constructor(items: Array<NwindDataItem> | 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));
+ }
+ }
+}
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.css b/samples/grids/grid/editing-excel-style-custom/src/index.css
new file mode 100644
index 0000000000..8b42ec3ed2
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.css
@@ -0,0 +1,3 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
+
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
new file mode 100644
index 0000000000..8ebc570e09
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -0,0 +1,83 @@
+import 'igniteui-webcomponents-grids/grids/combined';
+import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
+import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
+import { NwindData } from './NwindData';
+
+import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
+
+import "./index.css";
+
+export class Sample {
+
+ private grid1: IgcGridComponent
+ private _bind: () => void;
+
+ constructor() {
+ var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent;
+
+ this._bind = () => {
+ grid1.data = this.nwindData;
+ grid1.addEventListener('keydown', (event: KeyboardEvent) => {
+ var key = event.key; // Correct variable name used
+ const activeElem = grid1.selectedCells[0];
+
+ if ((key >= '0' && key <= '9') || (key.toLowerCase() >= 'a' && key.toLowerCase() <= 'z')) {
+
+ if (activeElem && activeElem.editMode === false) {
+ activeElem.setEditMode(true);
+ activeElem.value = key;
+ }
+ }
+
+ if (key === 'Enter') {
+
+ var nextRow = this.getNextEditableRowIndex(activeElem.row.index, activeElem.row.cells, event.shiftKey);
+
+ grid1.navigateTo(nextRow, activeElem.column.index, (obj: any) => {
+ obj.target.activate();
+ grid1.clearCellSelection();
+ });
+
+ }
+ });
+ }
+ this._bind();
+}
+
+ 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;
+ }
+
+ 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;
+ }
+
+}
+
+new Sample();
diff --git a/samples/grids/grid/editing-excel-style-custom/tsconfig.json b/samples/grids/grid/editing-excel-style-custom/tsconfig.json
new file mode 100644
index 0000000000..a15284fdc2
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/tsconfig.json
@@ -0,0 +1,40 @@
+{
+ "compilerOptions": {
+ "noImplicitReturns": true,
+ "esModuleInterop": true,
+ "resolveJsonModule": true,
+ "noImplicitAny": true,
+ "declarationDir": "dist/types",
+ "moduleResolution": "node",
+ "declaration": true,
+ "target": "es2015",
+ "module": "es2015",
+ "strict": true,
+ "strictNullChecks": false,
+ "baseUrl": ".",
+ "paths": {
+ "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+ "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
+ "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
+ "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
+ "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
+ "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
+ "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
+ "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
+ "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
+ "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
+ "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
+ "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
+ "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
+ "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
+ "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ]
+ }
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules",
+ "dist"
+ ]
+}
\ No newline at end of file
diff --git a/samples/grids/grid/editing-excel-style-custom/tslint.json b/samples/grids/grid/editing-excel-style-custom/tslint.json
new file mode 100644
index 0000000000..e3b56e93a1
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/tslint.json
@@ -0,0 +1,54 @@
+{
+ "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
+ "linterOptions": {
+ "exclude": [
+ "node_modules/**/*.ts",
+ "**/odatajs-4.0.0.js",
+ "src/images/*.*"
+ ]
+ },
+ "rules": {
+ "curly": [false, "ignore-same-line"],
+ "jsx-no-lambda": false,
+ "jsx-self-close": false,
+ "jsx-wrap-multiline": false,
+ "max-classes-per-file": [true, 10],
+ "member-ordering": false,
+ "no-console": false,
+ "no-string-literal": false,
+ "no-unused-vars": false,
+ "no-useless-constructor": false,
+ "no-trailing-whitespace": false,
+ "no-var": false,
+ "no-var-requires": false,
+ "no-var-keyword": false,
+ "ordered-imports": false,
+ "object-literal-sort-keys": false,
+ "object-literal-shorthand": false,
+ "only-arrow-functions": false,
+ "prefer-const": false,
+ "prefer-for-of": false,
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/type-annotation-spacing": "off"
+ },
+ "jsRules": {
+ "curly": [false, "ignore-same-line"],
+ "jsx-no-lambda": false,
+ "jsx-self-close": false,
+ "jsx-wrap-multiline": false,
+ "max-classes-per-file": [true, 10],
+ "no-console": false,
+ "no-unused-vars": false,
+ "no-useless-constructor": false,
+ "no-var-requires": false,
+ "object-literal-sort-keys": false,
+ "object-literal-shorthand": false,
+ "only-arrow-functions": false,
+ "ordered-imports": false,
+ "prefer-const": false,
+ "prefer-for-of": false,
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-useless-constructor": "off"
+ }
+ }
\ No newline at end of file
diff --git a/samples/grids/grid/editing-excel-style-custom/webpack.config.js b/samples/grids/grid/editing-excel-style-custom/webpack.config.js
new file mode 100644
index 0000000000..9d11a6155c
--- /dev/null
+++ b/samples/grids/grid/editing-excel-style-custom/webpack.config.js
@@ -0,0 +1,105 @@
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = env => {
+ const nodeEnv = process.env.NODE_ENV || 'development';
+ const isProd = nodeEnv === 'production';
+ const isLegacy = !!process.env.legacy && !(process.env.legacy == "false");
+ console.log(">> webpack nodeEnv=" + nodeEnv);
+ console.log(">> webpack isProd=" + isProd);
+ console.log(">> webpack isLegacy=" + isLegacy);
+ const presets = [
+ ["@babel/preset-env", {
+ "useBuiltIns": "usage",
+ "corejs": 3,
+ "targets": {
+ "browsers": isLegacy ? ["defaults"] : [
+ "last 2 Chrome versions",
+ "last 2 Safari versions",
+ "last 2 iOS versions",
+ "last 2 Firefox versions",
+ "last 2 Edge versions"]
+ }
+ }],
+ "@babel/preset-typescript"
+ ];
+
+ return {
+ entry: isLegacy ? [
+ path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'),
+ path.resolve(__dirname, 'node_modules/@webcomponents/template'),
+ path.resolve(__dirname, 'src')
+ ] : path.resolve(__dirname, 'src'),
+ devtool: isProd ? false : 'source-map',
+ output: {
+ filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js',
+ globalObject: 'this',
+ path: path.resolve(__dirname, 'dist'),
+ },
+
+ resolve: {
+ mainFields: ['esm2015', 'module', 'main'],
+ extensions: ['.ts', '.js', '.json'],
+ plugins: [new TsconfigPathsPlugin({
+ configFile: './tsconfig.json',
+ extensions: ['.ts', '.js'],
+ mainFields: ['esm2015', 'module', 'main']
+ })]
+ },
+
+ module: {
+ rules: [
+ { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
+ { test: /\.(csv|tsv)$/, use: ['csv-loader'] },
+ { test: /\.xml$/, use: ['xml-loader'] },
+ { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] },
+ {
+ test: /worker\.(ts|js)$/,
+ use: [
+ { loader: 'worker-loader' },
+ {
+ loader: 'babel-loader', options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ }
+ }
+ ]
+ },
+ {
+ test: /\.(ts|js)$/, loader: 'babel-loader',
+ options: {
+ "compact": isProd ? true : false,
+ "presets": presets,
+ "plugins": [
+ "@babel/plugin-proposal-class-properties",
+ "@babel/plugin-transform-runtime"
+ ]
+ },
+ exclude:
+ function (modulePath) {
+ return /node_modules/.test(modulePath) &&
+ !/igniteui-webcomponents/.test(modulePath) &&
+ !/lit-html/.test(modulePath);
+ }
+ }],
+ },
+
+ plugins: [
+ new webpack.DefinePlugin({
+ 'process.env.NODE_ENV': JSON.stringify(nodeEnv)
+ }),
+ new HtmlWebpackPlugin({
+ title: 'for-cs',
+ template: 'index.html'
+ }),
+ new ForkTsCheckerWebpackPlugin()
+ ]
+ };
+};
From 54749a3f39dd7f9bb25043c684463fdef3a46370 Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Wed, 10 Jul 2024 22:25:50 +0300
Subject: [PATCH 02/10] docs(grid): fixed keyboard nav and numeric edits
---
.../editing-excel-style-custom/index.html | 1 +
.../editing-excel-style-custom/src/index.ts | 69 ++++++++++++-------
2 files changed, 46 insertions(+), 24 deletions(-)
diff --git a/samples/grids/grid/editing-excel-style-custom/index.html b/samples/grids/grid/editing-excel-style-custom/index.html
index 7342edd4c2..f3882a2d93 100644
--- a/samples/grids/grid/editing-excel-style-custom/index.html
+++ b/samples/grids/grid/editing-excel-style-custom/index.html
@@ -22,6 +22,7 @@
<igc-grid
auto-generate="false"
primary-key="ProductID"
+ cell-selection="single"
name="grid1"
id="grid1">
<igc-column
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index 8ebc570e09..c77793646e 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -1,6 +1,6 @@
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
-import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
+import { IgcCellType, IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
import { NwindData } from './NwindData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
@@ -17,25 +17,61 @@ export class Sample {
this._bind = () => {
grid1.data = this.nwindData;
+
+ grid1.addEventListener('activeNodeChange', (event: any) => {
+ grid1.endEdit();
+ grid1.markForCheck();
+
+ });
grid1.addEventListener('keydown', (event: KeyboardEvent) => {
- var key = event.key; // Correct variable name used
- const activeElem = grid1.selectedCells[0];
+ var key = event.key;
+ var activeElem = grid1.selectedCells[0];
+
+ if(key === 'Escape') {
+ activeElem.editMode = false;
+ return;
+ }
- if ((key >= '0' && key <= '9') || (key.toLowerCase() >= 'a' && key.toLowerCase() <= 'z')) {
+ if ((key >= '0' && key <= '9') || (key.toLowerCase() >= 'a' && key.toLowerCase() <= 'z') && key != 'Enter') {
if (activeElem && activeElem.editMode === false) {
- activeElem.setEditMode(true);
activeElem.value = key;
+
+ activeElem.editMode = true;
+ grid1.markForCheck();
}
+ const inputElem = grid1.querySelector('input');
+ if (inputElem) {
+ 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') {
- var nextRow = this.getNextEditableRowIndex(activeElem.row.index, activeElem.row.cells, event.shiftKey);
+ if(activeElem == null) {
+ return;
+ }
+ var nextRowIndex = activeElem.row.index + 1;
+ if(event.shiftKey) {
+ nextRowIndex = activeElem.row.index - 1;
+ }
+ const maxRows = grid1.data.length;
+ if (nextRowIndex >= maxRows) {
+ nextRowIndex--;
+ }
+ if(nextRowIndex < 0) {
+ nextRowIndex = 0;
+ }
- grid1.navigateTo(nextRow, activeElem.column.index, (obj: any) => {
- obj.target.activate();
- grid1.clearCellSelection();
+ grid1.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => {
+ grid1.clearCellSelection();
+ obj.target.activate();
});
}
@@ -63,21 +99,6 @@ export class Sample {
return this._componentRenderer;
}
- 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;
- }
-
}
new Sample();
From a66c6f28ed14843466472cbfd45e1d6b5dbfa13f Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Tue, 23 Jul 2024 10:14:26 +0300
Subject: [PATCH 03/10] docs(grid): resolved some comments
---
.../editing-excel-style-custom/src/index.ts | 51 ++++++++++++++-----
1 file changed, 39 insertions(+), 12 deletions(-)
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index c77793646e..3755cdcd88 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -20,24 +20,20 @@ export class Sample {
grid1.addEventListener('activeNodeChange', (event: any) => {
grid1.endEdit();
- grid1.markForCheck();
+ (grid1.getElementsByClassName("igx-grid__tbody-content")[0] as any).focus();
});
grid1.addEventListener('keydown', (event: KeyboardEvent) => {
- var key = event.key;
+ var code = event.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 ((event.code >= 'Digit0' && event.code <= 'Digit9') ||
+ (event.code >= 'KeyA' && event.code <= 'KeyZ') &&
+ event.code !== 'Enter') {
if (activeElem && activeElem.editMode === false) {
- activeElem.value = key;
-
activeElem.editMode = true;
+ activeElem.editValue = event.key;
grid1.markForCheck();
}
const inputElem = grid1.querySelector('input');
@@ -51,8 +47,19 @@ export class Sample {
}
}
}
+
+ if (code === 'Backspace') {
+ if(activeElem == null) {
+ return;
+ }
+ const rowIndex = activeElem.row.index;
+ const columnKey = activeElem.column.field;
+
+ grid1.data[rowIndex][columnKey] = '';
+
+ }
- if (key === 'Enter') {
+ if (code === 'Enter') {
if(activeElem == null) {
return;
@@ -69,12 +76,27 @@ export class Sample {
nextRowIndex = 0;
}
+ while (!this.isEditableDataRecordAtIndex(nextRowIndex, grid1.data)) {
+ if (event.shiftKey) {
+ nextRowIndex--;
+ } else {
+ nextRowIndex++;
+ }
+ if (nextRowIndex >= maxRows) {
+ nextRowIndex--;
+ break;
+ }
+ if (nextRowIndex < 0) {
+ nextRowIndex = 0;
+ break;
+ }
+ }
grid1.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => {
grid1.clearCellSelection();
obj.target.activate();
});
- }
+ }
});
}
this._bind();
@@ -99,6 +121,11 @@ export class Sample {
return this._componentRenderer;
}
+ private isEditableDataRecordAtIndex(rowIndex: number, dataView: any[]): boolean {
+ const rec = dataView[rowIndex];
+ return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData
+ }
+
}
new Sample();
From 596921c0e6bd04f83a442cd6e01ea7f54fda2a20 Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Tue, 23 Jul 2024 11:44:02 +0300
Subject: [PATCH 04/10] docs(grid): fixed group header navigation
---
.../editing-excel-style-custom/src/index.ts | 43 +++++++------------
.../editing-excel-style-custom/tsconfig.json | 2 +-
2 files changed, 17 insertions(+), 28 deletions(-)
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index 3755cdcd88..d93f3af121 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -60,37 +60,15 @@ export class Sample {
}
if (code === 'Enter') {
-
+
if(activeElem == null) {
return;
}
- var nextRowIndex = activeElem.row.index + 1;
- if(event.shiftKey) {
- nextRowIndex = activeElem.row.index - 1;
- }
- const maxRows = grid1.data.length;
- if (nextRowIndex >= maxRows) {
- nextRowIndex--;
- }
- if(nextRowIndex < 0) {
- nextRowIndex = 0;
- }
- while (!this.isEditableDataRecordAtIndex(nextRowIndex, grid1.data)) {
- if (event.shiftKey) {
- nextRowIndex--;
- } else {
- nextRowIndex++;
- }
- if (nextRowIndex >= maxRows) {
- nextRowIndex--;
- break;
- }
- if (nextRowIndex < 0) {
- nextRowIndex = 0;
- break;
- }
- }
+ const thisRow = activeElem.row.index;
+ const dataView = this.grid1.dataView;
+ const nextRowIndex = this.getNextEditableRowIndex(thisRow, dataView, event.shiftKey);
+
grid1.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => {
grid1.clearCellSelection();
obj.target.activate();
@@ -121,6 +99,17 @@ export class Sample {
return this._componentRenderer;
}
+ public getNextEditableRowIndex(currentRowIndex: number, dataView: any[], previous: boolean): number {
+ if (currentRowIndex < 0 || (currentRowIndex === 0 && previous) || (currentRowIndex >= dataView.length - 1 && !previous)) {
+ return currentRowIndex;
+ }
+ if(previous){
+ return dataView.findLastIndex((rec, index) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
+ }
+ return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
+ }
+
+
private isEditableDataRecordAtIndex(rowIndex: number, dataView: any[]): boolean {
const rec = dataView[rowIndex];
return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData
diff --git a/samples/grids/grid/editing-excel-style-custom/tsconfig.json b/samples/grids/grid/editing-excel-style-custom/tsconfig.json
index a15284fdc2..3902d9ae8a 100644
--- a/samples/grids/grid/editing-excel-style-custom/tsconfig.json
+++ b/samples/grids/grid/editing-excel-style-custom/tsconfig.json
@@ -7,7 +7,7 @@
"declarationDir": "dist/types",
"moduleResolution": "node",
"declaration": true,
- "target": "es2015",
+ "target": "es2023",
"module": "es2015",
"strict": true,
"strictNullChecks": false,
From 5f3c266237150c6e61160c03538228bbd3bbb8ac Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Tue, 23 Jul 2024 13:56:26 +0300
Subject: [PATCH 05/10] docs(grid): replaced findLastIndex to fix ES2017 errors
---
.../grids/grid/editing-excel-style-custom/src/index.ts | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index d93f3af121..d6b96b8f30 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -104,7 +104,12 @@ export class Sample {
return currentRowIndex;
}
if(previous){
- return dataView.findLastIndex((rec, index) => index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
+ for (let index = dataView.length - 1; index >= 0; index--) {
+ if (index < currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView)) {
+ return index;
+ }
+ }
+ return -1
}
return dataView.findIndex((rec, index) => index > currentRowIndex && this.isEditableDataRecordAtIndex(index, dataView));
}
@@ -114,7 +119,6 @@ export class Sample {
const rec = dataView[rowIndex];
return !rec.expression && !rec.summaries && !rec.childGridsData && !rec.detailsData
}
-
}
new Sample();
From c7b15fd54a468a65f6dfd4ace4a57c1487cbcf2f Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Tue, 23 Jul 2024 14:40:27 +0300
Subject: [PATCH 06/10] docs(grid): removed input and replaced it with
activeElem
---
.../editing-excel-style-custom/src/index.ts | 20 +++++++++----------
.../editing-excel-style-custom/tsconfig.json | 2 +-
2 files changed, 10 insertions(+), 12 deletions(-)
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index d6b96b8f30..d20fbefd80 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -11,6 +11,7 @@ export class Sample {
private grid1: IgcGridComponent
private _bind: () => void;
+ private shouldAppendValue = false;
constructor() {
var grid1 = this.grid1 = document.getElementById('grid1') as IgcGridComponent;
@@ -34,18 +35,15 @@ export class Sample {
if (activeElem && activeElem.editMode === false) {
activeElem.editMode = true;
activeElem.editValue = event.key;
+ this.shouldAppendValue = true;
grid1.markForCheck();
- }
- const inputElem = grid1.querySelector('input');
- if (inputElem) {
- 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;
- }
- }
+ } else
+
+ if (activeElem && activeElem.editMode && this.shouldAppendValue) {
+ event.preventDefault();
+ activeElem.editValue = activeElem.editValue + event.key;
+ this.shouldAppendValue = false;
+ }
}
if (code === 'Backspace') {
diff --git a/samples/grids/grid/editing-excel-style-custom/tsconfig.json b/samples/grids/grid/editing-excel-style-custom/tsconfig.json
index 3902d9ae8a..a15284fdc2 100644
--- a/samples/grids/grid/editing-excel-style-custom/tsconfig.json
+++ b/samples/grids/grid/editing-excel-style-custom/tsconfig.json
@@ -7,7 +7,7 @@
"declarationDir": "dist/types",
"moduleResolution": "node",
"declaration": true,
- "target": "es2023",
+ "target": "es2015",
"module": "es2015",
"strict": true,
"strictNullChecks": false,
From c4551e8950edd605a1405262e08d220696382075 Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Tue, 6 Aug 2024 09:07:31 +0300
Subject: [PATCH 07/10] docs(grid): added markforcheck at backspace to trigger
detection
---
samples/grids/grid/editing-excel-style-custom/src/index.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index d20fbefd80..1df1adaa4d 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -54,6 +54,7 @@ export class Sample {
const columnKey = activeElem.column.field;
grid1.data[rowIndex][columnKey] = '';
+ grid1.markForCheck();
}
From 0674bc0c488e08afe7e308af09b4cdb78a2e21ef Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Tue, 20 Aug 2024 10:18:52 +0300
Subject: [PATCH 08/10] docs(grid): added numpad case for the editing
---
samples/grids/grid/editing-excel-style-custom/src/index.ts | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index 1df1adaa4d..2c14643d13 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -29,8 +29,9 @@ export class Sample {
var activeElem = grid1.selectedCells[0];
if ((event.code >= 'Digit0' && event.code <= 'Digit9') ||
- (event.code >= 'KeyA' && event.code <= 'KeyZ') &&
- event.code !== 'Enter') {
+ (event.code >= 'KeyA' && event.code <= 'KeyZ') ||
+ (event.code >= 'Numpad0' && event.code <= 'Numpad9') &&
+ event.code !== 'Enter' && event.code !== 'NumpadEnter') {
if (activeElem && activeElem.editMode === false) {
activeElem.editMode = true;
From 34ed0d1a39466f32bb99b10009295ef7d6ec1309 Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Tue, 20 Aug 2024 10:30:10 +0300
Subject: [PATCH 09/10] docs(grids): added numpad enter to caase
---
samples/grids/grid/editing-excel-style-custom/src/index.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index 2c14643d13..3152f8c1d0 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -59,7 +59,7 @@ export class Sample {
}
- if (code === 'Enter') {
+ if (code === 'Enter' || code === 'NumpadEnter') {
if(activeElem == null) {
return;
From e74cbf3d017418cdb8a94fc231c830bb19f86030 Mon Sep 17 00:00:00 2001
From: ttonev <ttonev@infragistics.com>
Date: Thu, 10 Apr 2025 16:36:53 +0300
Subject: [PATCH 10/10] fix(Sample): Remove focus call on activeNodeChange and
wrap activation in requestAnimationFrame
---
.../grids/grid/editing-excel-style-custom/src/index.ts | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/samples/grids/grid/editing-excel-style-custom/src/index.ts b/samples/grids/grid/editing-excel-style-custom/src/index.ts
index 1d7eae4938..36c210e3fa 100644
--- a/samples/grids/grid/editing-excel-style-custom/src/index.ts
+++ b/samples/grids/grid/editing-excel-style-custom/src/index.ts
@@ -21,7 +21,6 @@ export class Sample {
grid1.addEventListener('activeNodeChange', (event: any) => {
grid1.endEdit();
- (grid1.getElementsByClassName("igx-grid__tbody-content")[0] as any).focus();
});
grid1.addEventListener('keydown', (event: KeyboardEvent) => {
var code = event.code;
@@ -69,8 +68,11 @@ export class Sample {
const nextRowIndex = this.getNextEditableRowIndex(thisRow, dataView, event.shiftKey);
grid1.navigateTo(nextRowIndex, activeElem.column.visibleIndex, (obj: any) => {
- grid1.clearCellSelection();
- obj.target.activate();
+ grid1.clearCellSelection();
+
+ requestAnimationFrame(() => {
+ obj.target.activate();
+ });
});
}