From cfdc338252ebbe6d8bda5297f7832dcbb1ebf75d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 22 Oct 2025 11:16:37 +0000 Subject: [PATCH 1/5] Initial plan From e09506b65fc4607c9f6df0de64239f01d25b7d58 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 22 Oct 2025 11:31:47 +0000 Subject: [PATCH 2/5] Add cell-selection-custom-palette samples for Grid, HGrid, and TGrid Co-authored-by: tishko0 <15924795+tishko0@users.noreply.github.com> --- .../.devcontainer/devcontainer.json | 4 + .../.eslintrc.js | 78 + .../cell-selection-custom-palette/ReadMe.md | 56 + .../cell-selection-custom-palette/index.html | 12 + .../package.json | 49 + .../sandbox.config.json | 5 + .../src/CustomersData.ts | 56 + .../src/index.css | 13 + .../src/index.tsx | 73 + .../tsconfig.json | 44 + .../vite.config.js | 12 + .../.devcontainer/devcontainer.json | 4 + .../.eslintrc.js | 78 + .../cell-selection-custom-palette/ReadMe.md | 56 + .../cell-selection-custom-palette/index.html | 12 + .../package.json | 51 + .../sandbox.config.json | 5 + .../src/SingersData.json | 2496 +++++++++++++++++ .../src/index.css | 13 + .../src/index.tsx | 212 ++ .../tsconfig.json | 44 + .../vite.config.js | 12 + .../.devcontainer/devcontainer.json | 4 + .../.eslintrc.js | 78 + .../cell-selection-custom-palette/ReadMe.md | 56 + .../cell-selection-custom-palette/index.html | 12 + .../package.json | 49 + .../sandbox.config.json | 5 + .../src/OrdersTreeData.ts | 49 + .../src/index.css | 13 + .../src/index.tsx | 101 + .../tsconfig.json | 44 + .../vite.config.js | 12 + 33 files changed, 3808 insertions(+) create mode 100644 samples/grids/grid/cell-selection-custom-palette/.devcontainer/devcontainer.json create mode 100644 samples/grids/grid/cell-selection-custom-palette/.eslintrc.js create mode 100644 samples/grids/grid/cell-selection-custom-palette/ReadMe.md create mode 100644 samples/grids/grid/cell-selection-custom-palette/index.html create mode 100644 samples/grids/grid/cell-selection-custom-palette/package.json create mode 100644 samples/grids/grid/cell-selection-custom-palette/sandbox.config.json create mode 100644 samples/grids/grid/cell-selection-custom-palette/src/CustomersData.ts create mode 100644 samples/grids/grid/cell-selection-custom-palette/src/index.css create mode 100644 samples/grids/grid/cell-selection-custom-palette/src/index.tsx create mode 100644 samples/grids/grid/cell-selection-custom-palette/tsconfig.json create mode 100644 samples/grids/grid/cell-selection-custom-palette/vite.config.js create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/.devcontainer/devcontainer.json create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/.eslintrc.js create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/ReadMe.md create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/index.html create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/package.json create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/sandbox.config.json create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/src/SingersData.json create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.css create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/tsconfig.json create mode 100644 samples/grids/hierarchical-grid/cell-selection-custom-palette/vite.config.js create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/.devcontainer/devcontainer.json create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/.eslintrc.js create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/ReadMe.md create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/index.html create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/package.json create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/sandbox.config.json create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/src/OrdersTreeData.ts create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/src/index.css create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/src/index.tsx create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/tsconfig.json create mode 100644 samples/grids/tree-grid/cell-selection-custom-palette/vite.config.js diff --git a/samples/grids/grid/cell-selection-custom-palette/.devcontainer/devcontainer.json b/samples/grids/grid/cell-selection-custom-palette/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/grids/grid/cell-selection-custom-palette/.eslintrc.js b/samples/grids/grid/cell-selection-custom-palette/.eslintrc.js new file mode 100644 index 0000000000..7168b71441 --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/.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" + } + } + ] + }; \ No newline at end of file diff --git a/samples/grids/grid/cell-selection-custom-palette/ReadMe.md b/samples/grids/grid/cell-selection-custom-palette/ReadMe.md new file mode 100644 index 0000000000..8ce295b364 --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Cell Selection 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/cell-selection-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/cell-selection-custom-palette/index.html b/samples/grids/grid/cell-selection-custom-palette/index.html new file mode 100644 index 0000000000..fd8d08d532 --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/index.html @@ -0,0 +1,12 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + + \ No newline at end of file diff --git a/samples/grids/grid/cell-selection-custom-palette/package.json b/samples/grids/grid/cell-selection-custom-palette/package.json new file mode 100644 index 0000000000..1f4c711365 --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/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": "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.3.0-rc.2", + "igniteui-react-core": "19.2.2", + "igniteui-react-grids": "^19.2.0", + "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" + ] +} diff --git a/samples/grids/grid/cell-selection-custom-palette/sandbox.config.json b/samples/grids/grid/cell-selection-custom-palette/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/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/cell-selection-custom-palette/src/CustomersData.ts b/samples/grids/grid/cell-selection-custom-palette/src/CustomersData.ts new file mode 100644 index 0000000000..f9aa8c0893 --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/src/CustomersData.ts @@ -0,0 +1,56 @@ +export class CustomersDataItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public ID: string; + public Company: string; + public ContactName: string; + public ContactTitle: string; + public Address: string; + public City: string; + public Region: string; + public PostalCode: number; + public Country: string; + public Phone: string; + public Fax: string; + +} +export class CustomersData extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new CustomersDataItem({ ID: `ALFKI`, Company: `Alfreds Futterkiste`, ContactName: `Maria Anders`, ContactTitle: `Sales Representative`, Address: `Obere Str. 57`, City: `Berlin`, Region: `East`, PostalCode: 12209, Country: `Germany`, Phone: `030-0074321`, Fax: `030-0076545` }), + new CustomersDataItem({ ID: `ANATR`, Company: `Ana Trujillo Emparedados y helados`, ContactName: `Ana Trujillo`, ContactTitle: `Owner`, Address: `Avda. de la Constitución 2222`, City: `México D.F.`, Region: `South`, PostalCode: 5021, Country: `Mexico`, Phone: `(5) 555-4729`, Fax: `(5) 555-3745` }), + new CustomersDataItem({ ID: `ANTON`, Company: `Antonio Moreno Taquería`, ContactName: `Antonio Moreno`, ContactTitle: `Owner`, Address: `Mataderos 2312`, City: `México D.F.`, Region: `South`, PostalCode: 5023, Country: `Mexico`, Phone: `(5) 555-3932`, Fax: `(5) 555-3745` }), + new CustomersDataItem({ ID: `AROUT`, Company: `Around the Horn`, ContactName: `Thomas Hardy`, ContactTitle: `Sales Representative`, Address: `120 Hanover Sq.`, City: `London`, Region: `East`, PostalCode: 22000, Country: `UK`, Phone: `(171) 555-7788`, Fax: `(171) 555-6750` }), + new CustomersDataItem({ ID: `BERGS`, Company: `Berglunds snabbköp`, ContactName: `Christina Berglund`, ContactTitle: `Order Administrator`, Address: `Berguvsvägen 8`, City: `Luleå`, Region: `South`, PostalCode: 17000, Country: `Sweden`, Phone: `0921-12 34 65`, Fax: `0921-12 34 67` }), + new CustomersDataItem({ ID: `BLAUS`, Company: `Blauer See Delikatessen`, ContactName: `Hanna Moos`, ContactTitle: `Sales Representative`, Address: `Forsterstr. 57`, City: `Mannheim`, Region: `East`, PostalCode: 68306, Country: `Germany`, Phone: `0621-08460`, Fax: `0621-08924` }), + new CustomersDataItem({ ID: `BLONP`, Company: `Blondesddsl père et fils`, ContactName: `Frédérique Citeaux`, ContactTitle: `Marketing Manager`, Address: `24, place Kléber`, City: `Strasbourg`, Region: `East`, PostalCode: 67000, Country: `France`, Phone: `88.60.15.31`, Fax: `88.60.15.32` }), + new CustomersDataItem({ ID: `BOLID`, Company: `Bólido Comidas preparadas`, ContactName: `Martín Sommer`, ContactTitle: `Owner`, Address: `C/ Araquil, 67`, City: `Madrid`, Region: `East`, PostalCode: 28023, Country: `Spain`, Phone: `(91) 555 22 82`, Fax: `(91) 555 91 99` }), + new CustomersDataItem({ ID: `BONAP`, Company: `Bon app'`, ContactName: `Laurence Lebihan`, ContactTitle: `Owner`, Address: `12, rue des Bouchers`, City: `Marseille`, Region: `West`, PostalCode: 13008, Country: `France`, Phone: `91.24.45.40`, Fax: `91.24.45.41` }), + new CustomersDataItem({ ID: `BOTTM`, Company: `Bottom-Dollar Markets`, ContactName: `Elizabeth Lincoln`, ContactTitle: `Accounting Manager`, Address: `23 Tsawassen Blvd.`, City: `Tsawassen`, Region: `BC`, PostalCode: 28000, Country: `Canada`, Phone: `(604) 555-4729`, Fax: `(604) 555-3745` }), + new CustomersDataItem({ ID: `BSBEV`, Company: `B's Beverages`, ContactName: `Victoria Ashworth`, ContactTitle: `Sales Representative`, Address: `Fauntleroy Circus`, City: `London`, Region: `South`, PostalCode: 10000, Country: `UK`, Phone: `(171) 555-1212`, Fax: `(5) 555-3745` }), + new CustomersDataItem({ ID: `CACTU`, Company: `Cactus Comidas para llevar`, ContactName: `Patricio Simpson`, ContactTitle: `Sales Agent`, Address: `Cerrito 333`, City: `Buenos Aires`, Region: `East`, PostalCode: 1010, Country: `Argentina`, Phone: `(1) 135-5555`, Fax: `(1) 135-4892` }), + new CustomersDataItem({ ID: `CENTC`, Company: `Centro comercial Moctezuma`, ContactName: `Francisco Chang`, ContactTitle: `Marketing Manager`, Address: `Sierras de Granada 9993`, City: `México D.F.`, Region: `South`, PostalCode: 5022, Country: `Mexico`, Phone: `(5) 555-3392`, Fax: `(5) 555-7293` }), + new CustomersDataItem({ ID: `CHOPS`, Company: `Chop-suey Chinese`, ContactName: `Yang Wang`, ContactTitle: `Owner`, Address: `Hauptstr. 29`, City: `Bern`, Region: `East`, PostalCode: 3012, Country: `Switzerland`, Phone: `0452-076545`, Fax: `(5) 555-3745` }), + new CustomersDataItem({ ID: `COMMI`, Company: `Comércio Mineiro`, ContactName: `Pedro Afonso`, ContactTitle: `Sales Associate`, Address: `Av. dos Lusíadas, 23`, City: `Sao Paulo`, Region: `SP`, PostalCode: 34000, Country: `Brazil`, Phone: `(11) 555-7647`, Fax: `(5) 555-3745` }), + new CustomersDataItem({ ID: `CONSH`, Company: `Consolidated Holdings`, ContactName: `Elizabeth Brown`, ContactTitle: `Sales Representative`, Address: `Berkeley Gardens 12 Brewery`, City: `London`, Region: `South`, PostalCode: 27000, Country: `UK`, Phone: `(171) 555-2282`, Fax: `(171) 555-9199` }), + new CustomersDataItem({ ID: `DRACD`, Company: `Drachenblut Delikatessen`, ContactName: `Sven Ottlieb`, ContactTitle: `Order Administrator`, Address: `Walserweg 21`, City: `Aachen`, Region: `South`, PostalCode: 52066, Country: `Germany`, Phone: `0241-039123`, Fax: `0241-059428` }), + new CustomersDataItem({ ID: `DUMON`, Company: `Du monde entier`, ContactName: `Janine Labrune`, ContactTitle: `Owner`, Address: `67, rue des Cinquante Otages`, City: `Nantes`, Region: `East`, PostalCode: 44000, Country: `France`, Phone: `40.67.88.88`, Fax: `40.67.89.89` }), + new CustomersDataItem({ ID: `EASTC`, Company: `Eastern Connection`, ContactName: `Ann Devon`, ContactTitle: `Sales Agent`, Address: `35 King George`, City: `London`, Region: `East`, PostalCode: 41000, Country: `UK`, Phone: `(171) 555-0297`, Fax: `(171) 555-3373` }), + new CustomersDataItem({ ID: `ERNSH`, Company: `Ernst Handel`, ContactName: `Roland Mendel`, ContactTitle: `Sales Manager`, Address: `Kirchgasse 6`, City: `Graz`, Region: `South`, PostalCode: 8010, Country: `Austria`, Phone: `7675-3425`, Fax: `7675-3426` }), + new CustomersDataItem({ ID: `FAMIA`, Company: `Familia Arquibaldo`, ContactName: `Aria Cruz`, ContactTitle: `Marketing Assistant`, Address: `Rua Orós, 92`, City: `Sao Paulo`, Region: `SP`, PostalCode: 27000, Country: `Brazil`, Phone: `(11) 555-9857`, Fax: `(5) 555-3745` }), + new CustomersDataItem({ ID: `FISSA`, Company: `FISSA Fabrica Inter. Salchichas S.A.`, ContactName: `Diego Roel`, ContactTitle: `Accounting Manager`, Address: `C/ Moralzarzal, 86`, City: `Madrid`, Region: `East`, PostalCode: 28034, Country: `Spain`, Phone: `(91) 555 94 44`, Fax: `(91) 555 55 93` }), + new CustomersDataItem({ ID: `FOLIG`, Company: `Folies gourmandes`, ContactName: `Martine Rancé`, ContactTitle: `Assistant Sales Agent`, Address: `184, chaussée de Tournai`, City: `Lille`, Region: `South`, PostalCode: 59000, Country: `France`, Phone: `20.16.10.16`, Fax: `20.16.10.17` }), + new CustomersDataItem({ ID: `FOLKO`, Company: `Folk och fä HB`, ContactName: `Maria Larsson`, ContactTitle: `Owner`, Address: `Åkergatan 24`, City: `Bräcke`, Region: `East`, PostalCode: 36000, Country: `Sweden`, Phone: `0695-34 67 21`, Fax: `0695 33-4455` }), + new CustomersDataItem({ ID: `FRANK`, Company: `Frankenversand`, ContactName: `Peter Franken`, ContactTitle: `Marketing Manager`, Address: `Berliner Platz 43`, City: `München`, Region: `East`, PostalCode: 80805, Country: `Germany`, Phone: `089-0877310`, Fax: `089-0877451` }), + new CustomersDataItem({ ID: `FRANR`, Company: `France restauration`, ContactName: `Carine Schmitt`, ContactTitle: `Marketing Manager`, Address: `54, rue Royale`, City: `Nantes`, Region: `South`, PostalCode: 44000, Country: `France`, Phone: `40.32.21.21`, Fax: `40.32.21.20` }), + new CustomersDataItem({ ID: `FRANS`, Company: `Franchi S.p.A.`, ContactName: `Paolo Accorti`, ContactTitle: `Sales Representative`, Address: `Via Monte Bianco 34`, City: `Torino`, Region: `East`, PostalCode: 10100, Country: `Italy`, Phone: `011-4988260`, Fax: `011-4988261` }), + ]; + super(...newItems.slice(0)); + } + } +} diff --git a/samples/grids/grid/cell-selection-custom-palette/src/index.css b/samples/grids/grid/cell-selection-custom-palette/src/index.css new file mode 100644 index 0000000000..61a75422c6 --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/src/index.css @@ -0,0 +1,13 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ + + #grid { + --ig-size: var(--ig-size-medium); + } + + #grid { + --cell-selected-text-color: #FFFFFF; + --cell-active-border-color: #f2c43c; + --cell-selected-background: #0062a3; + } + diff --git a/samples/grids/grid/cell-selection-custom-palette/src/index.tsx b/samples/grids/grid/cell-selection-custom-palette/src/index.tsx new file mode 100644 index 0000000000..57508fa7ec --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/src/index.tsx @@ -0,0 +1,73 @@ +import React 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 { CustomersDataItem, CustomersData } from './CustomersData'; + +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 grid: IgrGrid + private gridRef(r: IgrGrid) { + this.grid = r; + this.setState({}); + } + + constructor(props: any) { + super(props); + + this.gridRef = this.gridRef.bind(this); + } + + public render(): JSX.Element { + return ( +
+ +
+ + + + + + + + + + +
+
+ ); + } + + private _customersData: CustomersData = null; + public get customersData(): CustomersData { + if (this._customersData == null) + { + this._customersData = new CustomersData(); + } + return this._customersData; + } + +} + +// 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/cell-selection-custom-palette/tsconfig.json b/samples/grids/grid/cell-selection-custom-palette/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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" + ] +} diff --git a/samples/grids/grid/cell-selection-custom-palette/vite.config.js b/samples/grids/grid/cell-selection-custom-palette/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/grids/grid/cell-selection-custom-palette/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/.devcontainer/devcontainer.json b/samples/grids/hierarchical-grid/cell-selection-custom-palette/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/.eslintrc.js b/samples/grids/hierarchical-grid/cell-selection-custom-palette/.eslintrc.js new file mode 100644 index 0000000000..7168b71441 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/.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" + } + } + ] + }; \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/ReadMe.md b/samples/grids/hierarchical-grid/cell-selection-custom-palette/ReadMe.md new file mode 100644 index 0000000000..db012e111a --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Cell Selection Style feature using [Hierarchical 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/hierarchical-grid/cell-selection-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/hierarchical-grid/cell-selection-custom-palette/index.html b/samples/grids/hierarchical-grid/cell-selection-custom-palette/index.html new file mode 100644 index 0000000000..fd8d08d532 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/index.html @@ -0,0 +1,12 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + + \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/package.json b/samples/grids/hierarchical-grid/cell-selection-custom-palette/package.json new file mode 100644 index 0000000000..68b6d99557 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/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.3.0-rc.2", + "igniteui-react-core": "19.2.2", + "igniteui-react-grids": "^19.2.0", + "igniteui-react-inputs": "19.2.2", + "igniteui-react-layouts": "19.2.2", + "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" + ] +} diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/sandbox.config.json b/samples/grids/hierarchical-grid/cell-selection-custom-palette/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/SingersData.json b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/SingersData.json new file mode 100644 index 0000000000..75ec4ec561 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/SingersData.json @@ -0,0 +1,2496 @@ +[ + { + "ID": 0, + "Artist": "Naomí Yepes", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/naomi.jpg", + "Debut": 2011, + "GrammyNominations": 6, + "GrammyAwards": 0, + "HasGrammyAward": false, + "Tours": [ + { + "Tour": "Faithful Tour", + "StartedOn": "Sep 12", + "Location": "Worldwide", + "Headliner": "NO", + "TouredBy": "Naomí Yepes" + }, + { + "Tour": "City Jam Sessions", + "StartedOn": "Aug 13", + "Location": "North America", + "Headliner": "YES", + "TouredBy": "Naomí Yepes" + }, + { + "Tour": "Christmas NYC 2013", + "StartedOn": "Dec 13", + "Location": "United States", + "Headliner": "NO", + "TouredBy": "Naomí Yepes" + }, + { + "Tour": "Christmas NYC 2014", + "StartedOn": "Dec 14", + "Location": "North America", + "Headliner": "NO", + "TouredBy": "Naomí Yepes" + }, + { + "Tour": "Watermelon Tour", + "StartedOn": "Feb 15", + "Location": "Worldwide", + "Headliner": "YES", + "TouredBy": "Naomí Yepes" + }, + { + "Tour": "Christmas NYC 2016", + "StartedOn": "Dec 16", + "Location": "United States", + "Headliner": "NO", + "TouredBy": "Naomí Yepes" + }, + { + "Tour": "The Dragon Tour", + "StartedOn": "Feb 17", + "Location": "Worldwide", + "Headliner": "NO", + "TouredBy": "Naomí Yepes" + }, + { + "Tour": "Organic Sessions", + "StartedOn": "Aug 18", + "Location": "United States, England", + "Headliner": "YES", + "TouredBy": "Naomí Yepes" + }, + { + "Tour": "Hope World Tour", + "StartedOn": "Mar 19", + "Location": "Worldwide", + "Headliner": "NO", + "TouredBy": "Naomí Yepes" + } + ], + "Albums": [ + { + "Album": "Initiation", + "LaunchDate": "September 3, 2013", + "BillboardReview": 86, + "USBillboard200": 1, + "Artist": "Naomí Yepes", + "Songs": [ + { + "Number": 1, + "Title": "Lonely Falling", + "Released": "01 May 2019", + "Genre": "*", + "Album": "Initiation" + }, + { + "Number": 2, + "Title": "Bright Breaking", + "Released": "25 Jul 2019", + "Genre": "Electro house Electropop", + "Album": "Initiation" + }, + { + "Number": 3, + "Title": "River of Whisper", + "Released": "29 Jan 2020", + "Genre": "Electro house Electropop", + "Album": "Initiation" + }, + { + "Number": 4, + "Title": "Sky of Storm", + "Released": "07 May 2019", + "Genre": "Electro house Electropop", + "Album": "Initiation" + }, + { + "Number": 5, + "Title": "Electric River", + "Released": "20 Jan 2020", + "Genre": "R&B", + "Album": "Initiation" + }, + { + "Number": 6, + "Title": "Storm of Storm", + "Released": "01 Sep 2019", + "Genre": "Crunk reggaeton", + "Album": "Initiation" + }, + { + "Number": 7, + "Title": "Fire of Dream", + "Released": "12 Sep 2019", + "Genre": "Electro house Electropop", + "Album": "Initiation" + }, + { + "Number": 8, + "Title": "Burning in the Light", + "Released": "15 Apr 2019", + "Genre": "*", + "Album": "Initiation" + }, + { + "Number": 9, + "Title": "Burning in the Storm", + "Released": "10 Sep 2019", + "Genre": "Electro house Electropop", + "Album": "Initiation" + }, + { + "Number": 10, + "Title": "Shadow of Whisper", + "Released": "06 Jan 2019", + "Genre": "Crunk reggaeton", + "Album": "Initiation" + } + ] + }, + { + "Album": "Dream Driven", + "LaunchDate": "August 25, 2014", + "BillboardReview": 81, + "USBillboard200": 1, + "Artist": "Naomí Yepes", + "Songs": [ + { + "Number": 1, + "Title": "Intro", + "Released": "10 Sep 2019", + "Genre": "*", + "Album": "Dream Driven" + }, + { + "Number": 2, + "Title": "Ferocious", + "Released": "28 Apr 2014", + "Genre": "Dance-pop R&B", + "Album": "Dream Driven" + }, + { + "Number": 3, + "Title": "Going crazy", + "Released": "10 Feb 2015", + "Genre": "Dance-pop EDM", + "Album": "Dream Driven" + }, + { + "Number": 4, + "Title": "Future past", + "Released": "20 Sep 2011", + "Genre": "*", + "Album": "Dream Driven" + }, + { + "Number": 5, + "Title": "Roaming like them", + "Released": "2 Jul 2014", + "Genre": "Electro house Electropop", + "Album": "Dream Driven" + }, + { + "Number": 6, + "Title": "Last Wishes", + "Released": "12 Aug 2014", + "Genre": "R&B", + "Album": "Dream Driven" + }, + { + "Number": 7, + "Title": "Stay where you are", + "Released": "14 Sep 2013", + "Genre": "*", + "Album": "Dream Driven" + }, + { + "Number": 8, + "Title": "Imaginarium", + "Released": "20 Sep 2021", + "Genre": "*", + "Album": "Dream Driven" + }, + { + "Number": 9, + "Title": "Tell me", + "Released": "30 Sep 2014", + "Genre": "Synth-pop R&B", + "Album": "Dream Driven" + }, + { + "Number": 10, + "Title": "Shredded into pieces", + "Released": "11 Sep 2015", + "Genre": "*", + "Album": "Dream Driven" + }, + { + "Number": 11, + "Title": "Capture this moment", + "Released": "13 Sep 2016", + "Genre": "*", + "Album": "Dream Driven" + }, + { + "Number": 12, + "Title": "Dream Driven", + "Released": "14 Sep 2014", + "Genre": "*", + "Album": "Dream Driven" + } + ] + }, + { + "Album": "The dragon journey", + "LaunchDate": "May 20, 2016", + "BillboardReview": 60, + "USBillboard200": 2, + "Artist": "Naomí Yepes", + "Songs": [ + { + "Number": 1, + "Title": "Calling in the Storm", + "Released": "12 Mar 2019", + "Genre": "Electro house Electropop", + "Album": "The dragon journey" + }, + { + "Number": 2, + "Title": "Hiding in the Dream", + "Released": "23 Mar 2019", + "Genre": "R&B", + "Album": "The dragon journey" + }, + { + "Number": 3, + "Title": "Electric Heart", + "Released": "17 Mar 2019", + "Genre": "ethno-tunes", + "Album": "The dragon journey" + }, + { + "Number": 4, + "Title": "Shadow of Echo", + "Released": "20 Feb 2019", + "Genre": "ethno-tunes", + "Album": "The dragon journey" + }, + { + "Number": 5, + "Title": "Flying in the Storm", + "Released": "08 Apr 2019", + "Genre": "R&B", + "Album": "The dragon journey" + }, + { + "Number": 6, + "Title": "Dark Waiting", + "Released": "20 Oct 2019", + "Genre": "Synth-pop R&B", + "Album": "The dragon journey" + }, + { + "Number": 7, + "Title": "Fire of River", + "Released": "20 Feb 2019", + "Genre": "Synth-pop R&B", + "Album": "The dragon journey" + }, + { + "Number": 8, + "Title": "Wild Crying", + "Released": "14 Jun 2019", + "Genre": "R&B", + "Album": "The dragon journey" + }, + { + "Number": 9, + "Title": "Bright Dancing", + "Released": "14 Mar 2019", + "Genre": "Electro house Electropop", + "Album": "The dragon journey" + }, + { + "Number": 10, + "Title": "Golden Waiting", + "Released": "12 Sep 2019", + "Genre": "Synth-pop R&B", + "Album": "The dragon journey" + } + ] + }, + { + "Album": "Organic me", + "LaunchDate": "August 17, 2018", + "BillboardReview": 82, + "USBillboard200": 1, + "Artist": "Naomí Yepes", + "Songs": [ + { + "Number": 1, + "Title": "I Love", + "Released": "11 May 2019", + "Genre": "Crunk reggaeton", + "Album": "Organic me" + }, + { + "Number": 2, + "Title": "Early Morning Compass", + "Released": "15 Jan 2020", + "Genre": "mystical parody-bap ", + "Album": "Organic me" + }, + { + "Number": 3, + "Title": "Key Fields Forever", + "Released": "2 Jan 2020", + "Genre": "Dance-pop EDM", + "Album": "Organic me" + }, + { + "Number": 4, + "Title": "Stand by Your Goblins", + "Released": "20 Nov 2019", + "Genre": "*", + "Album": "Organic me" + }, + { + "Number": 5, + "Title": "Mad to Walk", + "Released": "12 May 2019", + "Genre": "Electro house Electropop", + "Album": "Organic me" + }, + { + "Number": 6, + "Title": "Alice's Waiting", + "Released": "28 Jan 2020", + "Genre": "R&B", + "Album": "Organic me" + }, + { + "Number": 7, + "Title": "We Shall Kiss", + "Released": "30 Oct 2019", + "Genre": "*", + "Album": "Organic me" + }, + { + "Number": 8, + "Title": "Behind Single Ants", + "Released": "2 Oct 2019", + "Genre": "*", + "Album": "Organic me" + }, + { + "Number": 9, + "Title": "Soap Autopsy", + "Released": "8 Aug 2019", + "Genre": "Synth-pop R&B", + "Album": "Organic me" + }, + { + "Number": 10, + "Title": "Have You Met Rich?", + "Released": "1 Jul 2019", + "Genre": "ethno-tunes", + "Album": "Organic me" + }, + { + "Number": 11, + "Title": "Livin' on a Banana", + "Released": "22 Nov 2019", + "Genre": "Crunk reggaeton", + "Album": "Organic me" + } + ] + }, + { + "Album": "Curiosity", + "LaunchDate": "December 7, 2019", + "BillboardReview": 75, + "USBillboard200": 12, + "Artist": "Naomí Yepes", + "Songs": [ + { + "Number": 1, + "Title": "Storm of Dream", + "Released": "05 Jan 2019", + "Genre": "*", + "Album": "Curiosity" + }, + { + "Number": 2, + "Title": "Echo of Dream", + "Released": "28 Jan 2019", + "Genre": "Synth-pop R&B", + "Album": "Curiosity" + }, + { + "Number": 3, + "Title": "Light of Shadow", + "Released": "07 Feb 2019", + "Genre": "Synth-pop R&B", + "Album": "Curiosity" + }, + { + "Number": 4, + "Title": "Storm of Heart", + "Released": "05 Jan 2020", + "Genre": "Electro house Electropop", + "Album": "Curiosity" + }, + { + "Number": 5, + "Title": "Shadow of River", + "Released": "27 Feb 2019", + "Genre": "*", + "Album": "Curiosity" + }, + { + "Number": 6, + "Title": "Wicked Dancing", + "Released": "17 Jan 2020", + "Genre": "ethno-tunes", + "Album": "Curiosity" + }, + { + "Number": 7, + "Title": "River of Light", + "Released": "22 Feb 2019", + "Genre": "R&B", + "Album": "Curiosity" + }, + { + "Number": 8, + "Title": "Lonely Breaking", + "Released": "09 Sep 2019", + "Genre": "ethno-tunes", + "Album": "Curiosity" + }, + { + "Number": 9, + "Title": "Furious Flying", + "Released": "08 Jun 2019", + "Genre": "R&B", + "Album": "Curiosity" + }, + { + "Number": 10, + "Title": "Hiding in the Storm", + "Released": "27 May 2019", + "Genre": "Electro house Electropop", + "Album": "Curiosity" + } + ] + } + ] + }, + { + "ID": 1, + "Artist": "Babila Ebwélé", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/babila.jpg", + "Debut": 2009, + "GrammyNominations": 0, + "GrammyAwards": 11, + "HasGrammyAward": true, + "Tours": [ + { + "Tour": "The last straw", + "StartedOn": "May 09", + "Location": "Europe, Asia", + "Headliner": "NO", + "TouredBy": "Babila Ebwélé" + }, + { + "Tour": "No foundations", + "StartedOn": "Jun 04", + "Location": "United States, Europe", + "Headliner": "YES", + "TouredBy": "Babila Ebwélé" + }, + { + "Tour": "Crazy eyes", + "StartedOn": "Jun 08", + "Location": "North America", + "Headliner": "NO", + "TouredBy": "Babila Ebwélé" + }, + { + "Tour": "Zero gravity", + "StartedOn": "Apr 19", + "Location": "United States", + "Headliner": "NO", + "TouredBy": "Babila Ebwélé" + }, + { + "Tour": "Battle with myself", + "StartedOn": "Mar 08", + "Location": "North America", + "Headliner": "YES", + "TouredBy": "Babila Ebwélé" + } + ], + "Albums": [ + { + "Album": "Pushing up daisies", + "LaunchDate": "May 31, 2000", + "BillboardReview": 86, + "USBillboard200": 42, + "Artist": "Babila Ebwélé", + "Songs": [ + { + "Number": 1, + "Title": "Wood Shavings Forever", + "Released": "9 Jun 2019", + "Genre": "*", + "Album": "Pushing up daisies" + }, + { + "Number": 2, + "Title": "Early Morning Drive", + "Released": "20 May 2019", + "Genre": "*", + "Album": "Pushing up daisies" + }, + { + "Number": 3, + "Title": "Don't Natter", + "Released": "10 Jun 2019", + "Genre": "adult calypso-industrial", + "Album": "Pushing up daisies" + }, + { + "Number": 4, + "Title": "Stairway to Balloons", + "Released": "18 Jun 2019", + "Genre": "calypso and mariachi", + "Album": "Pushing up daisies" + }, + { + "Number": 5, + "Title": "The Number of your Apple", + "Released": "29 Oct 2019", + "Genre": "*", + "Album": "Pushing up daisies" + }, + { + "Number": 6, + "Title": "Your Delightful Heart", + "Released": "24 Feb 2019", + "Genre": "*", + "Album": "Pushing up daisies" + }, + { + "Number": 7, + "Title": "Nice Weather For Balloons", + "Released": "1 Aug 2019", + "Genre": "rap-hop", + "Album": "Pushing up daisies" + }, + { + "Number": 8, + "Title": "The Girl From Cornwall", + "Released": "4 May 2019", + "Genre": "enigmatic rock-and-roll", + "Album": "Pushing up daisies" + }, + { + "Number": 9, + "Title": "Here Without Jack", + "Released": "24 Oct 2019", + "Genre": "*", + "Album": "Pushing up daisies" + }, + { + "Number": 10, + "Title": "Born Rancid", + "Released": "19 Mar 2019", + "Genre": "*", + "Album": "Pushing up daisies" + } + ] + }, + { + "Album": "Death's dead", + "LaunchDate": "June 8, 2016", + "BillboardReview": 85, + "USBillboard200": 95, + "Artist": "Babila Ebwélé", + "Songs": [ + { + "Number": 1, + "Title": "Men Sound Better With You", + "Released": "20 Oct 2019", + "Genre": "rap-hop", + "Album": "Death's dead" + }, + { + "Number": 2, + "Title": "Ghost in My Rod", + "Released": "5 Oct 2019", + "Genre": "enigmatic rock-and-roll", + "Album": "Death's dead" + }, + { + "Number": 3, + "Title": "Bed of Men", + "Released": "14 Nov 2019", + "Genre": "whimsical comedy-grass ", + "Album": "Death's dead" + }, + { + "Number": 4, + "Title": "Don't Push", + "Released": "2 Jan 2020", + "Genre": "unblack electronic-trip-hop", + "Album": "Death's dead" + }, + { + "Number": 5, + "Title": "Nice Weather For Men", + "Released": "18 Dec 2019", + "Genre": "*", + "Album": "Death's dead" + }, + { + "Number": 6, + "Title": "Rancid Rhapsody", + "Released": "10 Mar 2019", + "Genre": "*", + "Album": "Death's dead" + }, + { + "Number": 7, + "Title": "Push, Push, Push!", + "Released": "21 Feb 2019", + "Genre": "*", + "Album": "Death's dead" + }, + { + "Number": 8, + "Title": "My Name is Sarah", + "Released": "15 Nov 2019", + "Genre": "*", + "Album": "Death's dead" + }, + { + "Number": 9, + "Title": "The Girl From My Hotel", + "Released": "6 Nov 2019", + "Genre": "*", + "Album": "Death's dead" + }, + { + "Number": 10, + "Title": "Free Box", + "Released": "18 Apr 2019", + "Genre": "splitter-funk", + "Album": "Death's dead" + }, + { + "Number": 11, + "Title": "Hotel Cardiff", + "Released": "30 Dec 2019", + "Genre": "guilty pleasure ebm", + "Album": "Death's dead" + } + ] + } + ] + }, + { + "ID": 2, + "Artist": "Ahmad Nazeri", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/ahmad.jpg", + "Debut": 2004, + "GrammyNominations": 3, + "GrammyAwards": 1, + "HasGrammyAward": true, + "Tours": [ + + ], + "Albums": [ + { + "Album": "Emergency", + "LaunchDate": "March 6, 2004", + "BillboardReview": 98, + "USBillboard200": 69, + "Artist": "Ahmad Nazeri", + "Songs": [ + { + "Number": 1, + "Title": "Gentle Falling", + "Released": "26 Apr 2019", + "Genre": "Crunk reggaeton", + "Album": "Emergency" + }, + { + "Number": 2, + "Title": "Calling in the Fire", + "Released": "03 Sep 2019", + "Genre": "ethno-tunes", + "Album": "Emergency" + }, + { + "Number": 3, + "Title": "Fire of Shadow", + "Released": "05 Jan 2019", + "Genre": "ethno-tunes", + "Album": "Emergency" + }, + { + "Number": 4, + "Title": "Dancing in the Dream", + "Released": "15 Apr 2019", + "Genre": "R&B", + "Album": "Emergency" + }, + { + "Number": 5, + "Title": "Calling in the Shadow", + "Released": "09 Oct 2019", + "Genre": "R&B", + "Album": "Emergency" + }, + { + "Number": 6, + "Title": "Falling in the Sky", + "Released": "08 Mar 2019", + "Genre": "ethno-tunes", + "Album": "Emergency" + }, + { + "Number": 7, + "Title": "Calling in the Storm", + "Released": "05 Dec 2019", + "Genre": "ethno-tunes", + "Album": "Emergency" + }, + { + "Number": 8, + "Title": "Falling in the River", + "Released": "19 Aug 2019", + "Genre": "Electro house Electropop", + "Album": "Emergency" + }, + { + "Number": 9, + "Title": "Electric Fire", + "Released": "30 Nov 2019", + "Genre": "Crunk reggaeton", + "Album": "Emergency" + }, + { + "Number": 10, + "Title": "Lonely River", + "Released": "11 Nov 2019", + "Genre": "Electro house Electropop", + "Album": "Emergency" + } + ] + }, + { + "Album": "Bursting bubbles", + "LaunchDate": "April 17, 2006", + "BillboardReview": 69, + "USBillboard200": 39, + "Artist": "Ahmad Nazeri", + "Songs": [ + { + "Number": 1, + "Title": "Lonely Dream", + "Released": "11 Dec 2019", + "Genre": "ethno-tunes", + "Album": "Bursting bubbles" + }, + { + "Number": 2, + "Title": "Fire of River", + "Released": "01 Aug 2019", + "Genre": "Synth-pop R&B", + "Album": "Bursting bubbles" + }, + { + "Number": 3, + "Title": "Wicked Falling", + "Released": "25 Jan 2019", + "Genre": "*", + "Album": "Bursting bubbles" + }, + { + "Number": 4, + "Title": "Crying in the Shadow", + "Released": "04 Jan 2019", + "Genre": "Synth-pop R&B", + "Album": "Bursting bubbles" + }, + { + "Number": 5, + "Title": "Wild Burning", + "Released": "10 May 2019", + "Genre": "ethno-tunes", + "Album": "Bursting bubbles" + }, + { + "Number": 6, + "Title": "Waiting in the Heart", + "Released": "07 Aug 2019", + "Genre": "ethno-tunes", + "Album": "Bursting bubbles" + }, + { + "Number": 7, + "Title": "Fire of Fire", + "Released": "16 May 2019", + "Genre": "Electro house Electropop", + "Album": "Bursting bubbles" + }, + { + "Number": 8, + "Title": "Bright Heart", + "Released": "14 Mar 2019", + "Genre": "Synth-pop R&B", + "Album": "Bursting bubbles" + }, + { + "Number": 9, + "Title": "Lonely Fire", + "Released": "15 Oct 2019", + "Genre": "R&B", + "Album": "Bursting bubbles" + }, + { + "Number": 10, + "Title": "Sky of Dream", + "Released": "20 Jun 2019", + "Genre": "ethno-tunes", + "Album": "Bursting bubbles" + } + ] + } + ] + }, + { + "ID": 3, + "Artist": "Kimmy McIlmorie", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/kimmy.jpg", + "Debut": 2007, + "GrammyNominations": 21, + "GrammyAwards": 3, + "HasGrammyAward": true, + "Tours": [ + + ], + "Albums": [ + { + "Album": "Here we go again", + "LaunchDate": "November 18, 2017", + "BillboardReview": 68, + "USBillboard200": 1, + "Artist": "Kimmy McIlmorie", + "Songs": [ + { + "Number": 1, + "Title": "Storm of Sky", + "Released": "04 Mar 2019", + "Genre": "ethno-tunes", + "Album": "Here we go again" + }, + { + "Number": 2, + "Title": "Dream of Shadow", + "Released": "03 Jan 2019", + "Genre": "ethno-tunes", + "Album": "Here we go again" + }, + { + "Number": 3, + "Title": "Dream of Shadow", + "Released": "19 Dec 2019", + "Genre": "Electro house Electropop", + "Album": "Here we go again" + }, + { + "Number": 4, + "Title": "Golden Fire", + "Released": "20 Jan 2019", + "Genre": "R&B", + "Album": "Here we go again" + }, + { + "Number": 5, + "Title": "Running in the Light", + "Released": "03 Jan 2020", + "Genre": "Synth-pop R&B", + "Album": "Here we go again" + }, + { + "Number": 6, + "Title": "Flying in the Heart", + "Released": "17 Jan 2019", + "Genre": "*", + "Album": "Here we go again" + }, + { + "Number": 7, + "Title": "Fire of Storm", + "Released": "26 Jan 2019", + "Genre": "ethno-tunes", + "Album": "Here we go again" + }, + { + "Number": 8, + "Title": "Calling in the Sky", + "Released": "28 Oct 2019", + "Genre": "Synth-pop R&B", + "Album": "Here we go again" + }, + { + "Number": 9, + "Title": "Flying in the Shadow", + "Released": "30 Mar 2019", + "Genre": "ethno-tunes", + "Album": "Here we go again" + }, + { + "Number": 10, + "Title": "Golden Dancing", + "Released": "12 Oct 2019", + "Genre": "ethno-tunes", + "Album": "Here we go again" + } + ] + } + ] + }, + { + "ID": 4, + "Artist": "Mar Rueda", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/mar.jpg", + "Debut": 1996, + "GrammyNominations": 14, + "GrammyAwards": 2, + "HasGrammyAward": true, + "Tours": [ + + ], + "Albums": [ + + ] + }, + { + "ID": 5, + "Artist": "Izabella Tabakova", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/izabella.jpg", + "Debut": 2017, + "GrammyNominations": 7, + "GrammyAwards": 11, + "HasGrammyAward": true, + "Tours": [ + { + "Tour": "Final breath", + "StartedOn": "Jun 13", + "Location": "Europe", + "Headliner": "YES", + "TouredBy": "Izabella Tabakova" + }, + { + "Tour": "Once bitten", + "StartedOn": "Dec 18", + "Location": "Australia, United States", + "Headliner": "NO", + "TouredBy": "Izabella Tabakova" + }, + { + "Tour": "Code word", + "StartedOn": "Sep 19", + "Location": "United States, Europe", + "Headliner": "NO", + "TouredBy": "Izabella Tabakova" + }, + { + "Tour": "Final draft", + "StartedOn": "Sep 17", + "Location": "United States, Europe", + "Headliner": "YES", + "TouredBy": "Izabella Tabakova" + } + ], + "Albums": [ + { + "Album": "Once bitten", + "LaunchDate": "July 16, 2007", + "BillboardReview": 79, + "USBillboard200": 53, + "Artist": "Izabella Tabakova", + "Songs": [ + { + "Number": 1, + "Title": "Whole Lotta Super Cats", + "Released": "21 May 2019", + "Genre": "*", + "Album": "Once bitten" + }, + { + "Number": 2, + "Title": "Enter Becky", + "Released": "16 Jan 2020", + "Genre": "*", + "Album": "Once bitten" + }, + { + "Number": 3, + "Title": "Your Cheatin' Flamingo", + "Released": "14 Jan 2020", + "Genre": "*", + "Album": "Once bitten" + }, + { + "Number": 4, + "Title": "Mad to Kiss", + "Released": "6 Nov 2019", + "Genre": "Synth-pop R&B", + "Album": "Once bitten" + }, + { + "Number": 5, + "Title": "Hotel Prague", + "Released": "20 Oct 2019", + "Genre": "ethno-tunes", + "Album": "Once bitten" + }, + { + "Number": 6, + "Title": "Jail on My Mind", + "Released": "31 May 2019", + "Genre": "Crunk reggaeton", + "Album": "Once bitten" + }, + { + "Number": 7, + "Title": "Amazing Blues", + "Released": "29 May 2019", + "Genre": "mystical parody-bap ", + "Album": "Once bitten" + }, + { + "Number": 8, + "Title": "Goody Two Iron Filings", + "Released": "4 Jul 2019", + "Genre": "Electro house Electropop", + "Album": "Once bitten" + }, + { + "Number": 9, + "Title": "I Love in Your Arms", + "Released": "7 Jun 2019", + "Genre": "R&B", + "Album": "Once bitten" + }, + { + "Number": 10, + "Title": "Truly Madly Amazing", + "Released": "12 Sep 2019", + "Genre": "ethno-tunes", + "Album": "Once bitten" + } + ] + }, + { + "Album": "Your graciousness", + "LaunchDate": "November 17, 2004", + "BillboardReview": 69, + "USBillboard200": 30, + "Artist": "Izabella Tabakova", + "Songs": [ + { + "Number": 1, + "Title": "We Shall Tickle", + "Released": "31 Aug 2019", + "Genre": "old emo-garage ", + "Album": "Your graciousness" + }, + { + "Number": 2, + "Title": "Snail Boogie", + "Released": "14 Jun 2019", + "Genre": "*", + "Album": "Your graciousness" + }, + { + "Number": 3, + "Title": "Amazing Liz", + "Released": "15 Oct 2019", + "Genre": "*", + "Album": "Your graciousness" + }, + { + "Number": 4, + "Title": "When Sexy Aardvarks Cry", + "Released": "1 Oct 2019", + "Genre": "whimsical comedy-grass ", + "Album": "Your graciousness" + }, + { + "Number": 5, + "Title": "Stand By Dave", + "Released": "18 Aug 2019", + "Genre": "unblack electronic-trip-hop", + "Album": "Your graciousness" + }, + { + "Number": 6, + "Title": "The Golf Course is Your Land", + "Released": "2 Apr 2019", + "Genre": "*", + "Album": "Your graciousness" + }, + { + "Number": 7, + "Title": "Where Have All the Men Gone?", + "Released": "29 Apr 2019", + "Genre": "*", + "Album": "Your graciousness" + }, + { + "Number": 8, + "Title": "Rhythm of the Leg", + "Released": "5 Aug 2019", + "Genre": "ethno-tunes", + "Album": "Your graciousness" + }, + { + "Number": 9, + "Title": "Baby, I Need Your Hats", + "Released": "5 Dec 2019", + "Genre": "neuro-tunes", + "Album": "Your graciousness" + }, + { + "Number": 10, + "Title": "Stand by Your Cat", + "Released": "25 Jul 2019", + "Genre": "*", + "Album": "Your graciousness" + } + ] + }, + { + "Album": "Dark matters", + "LaunchDate": "November 3, 2002", + "BillboardReview": 79, + "USBillboard200": 85, + "Artist": "Izabella Tabakova", + "Songs": [ + { + "Number": 1, + "Title": "Hiding in the Light", + "Released": "24 Jan 2019", + "Genre": "Synth-pop R&B", + "Album": "Dark matters" + }, + { + "Number": 2, + "Title": "Furious River", + "Released": "13 Jan 2020", + "Genre": "Electro house Electropop", + "Album": "Dark matters" + }, + { + "Number": 3, + "Title": "Wild Crying", + "Released": "27 Feb 2019", + "Genre": "Electro house Electropop", + "Album": "Dark matters" + }, + { + "Number": 4, + "Title": "Light of Dream", + "Released": "01 Jun 2019", + "Genre": "Crunk reggaeton", + "Album": "Dark matters" + }, + { + "Number": 5, + "Title": "Light of Dream", + "Released": "24 Aug 2019", + "Genre": "*", + "Album": "Dark matters" + }, + { + "Number": 6, + "Title": "Storm of Light", + "Released": "26 Feb 2019", + "Genre": "*", + "Album": "Dark matters" + }, + { + "Number": 7, + "Title": "Dark Storm", + "Released": "18 Jan 2020", + "Genre": "R&B", + "Album": "Dark matters" + }, + { + "Number": 8, + "Title": "Dark Calling", + "Released": "20 Mar 2019", + "Genre": "Crunk reggaeton", + "Album": "Dark matters" + }, + { + "Number": 9, + "Title": "Sky of Whisper", + "Released": "30 Jan 2019", + "Genre": "ethno-tunes", + "Album": "Dark matters" + }, + { + "Number": 10, + "Title": "Dancing in the Light", + "Released": "28 Nov 2019", + "Genre": "Synth-pop R&B", + "Album": "Dark matters" + } + ] + } + ] + }, + { + "ID": 6, + "Artist": "Nguyễn Diệp Chi", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/nguyen.jpg", + "Debut": 1992, + "GrammyNominations": 4, + "GrammyAwards": 2, + "HasGrammyAward": true, + "Tours": [ + + ], + "Albums": [ + { + "Album": "Library of liberty", + "LaunchDate": "December 22, 2003", + "BillboardReview": 93, + "USBillboard200": 5, + "Artist": "Nguyễn Diệp Chi", + "Songs": [ + { + "Number": 1, + "Title": "Echo of River", + "Released": "05 Mar 2019", + "Genre": "Synth-pop R&B", + "Album": "Library of liberty" + }, + { + "Number": 2, + "Title": "Heart of River", + "Released": "12 Jan 2020", + "Genre": "Electro house Electropop", + "Album": "Library of liberty" + }, + { + "Number": 3, + "Title": "Dark Light", + "Released": "09 Aug 2019", + "Genre": "Electro house Electropop", + "Album": "Library of liberty" + }, + { + "Number": 4, + "Title": "Dark Fire", + "Released": "22 Jun 2019", + "Genre": "R&B", + "Album": "Library of liberty" + }, + { + "Number": 5, + "Title": "Flying in the Fire", + "Released": "22 Jul 2019", + "Genre": "*", + "Album": "Library of liberty" + }, + { + "Number": 6, + "Title": "Shadow of Heart", + "Released": "02 Jan 2020", + "Genre": "*", + "Album": "Library of liberty" + }, + { + "Number": 7, + "Title": "Fire of Fire", + "Released": "27 Jan 2019", + "Genre": "*", + "Album": "Library of liberty" + }, + { + "Number": 8, + "Title": "Falling in the River", + "Released": "05 Aug 2019", + "Genre": "Crunk reggaeton", + "Album": "Library of liberty" + }, + { + "Number": 9, + "Title": "Fire of Light", + "Released": "31 Dec 2019", + "Genre": "ethno-tunes", + "Album": "Library of liberty" + }, + { + "Number": 10, + "Title": "Bright Flying", + "Released": "24 Jan 2019", + "Genre": "*", + "Album": "Library of liberty" + } + ] + } + ] + }, + { + "ID": 7, + "Artist": "Eva Lee", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/eva.jpg", + "Debut": 2008, + "GrammyNominations": 2, + "GrammyAwards": 0, + "HasGrammyAward": false, + "Tours": [ + + ], + "Albums": [ + { + "Album": "Just a tease", + "LaunchDate": "May 3, 2001", + "BillboardReview": 91, + "USBillboard200": 29, + "Artist": "Eva Lee", + "Songs": [ + { + "Number": 1, + "Title": "Dancing in the Shadow", + "Released": "02 Aug 2019", + "Genre": "ethno-tunes", + "Album": "Just a tease" + }, + { + "Number": 2, + "Title": "Silent Whisper", + "Released": "09 Jul 2019", + "Genre": "*", + "Album": "Just a tease" + }, + { + "Number": 3, + "Title": "Crying in the Whisper", + "Released": "30 May 2019", + "Genre": "Crunk reggaeton", + "Album": "Just a tease" + }, + { + "Number": 4, + "Title": "River of Light", + "Released": "10 Jan 2019", + "Genre": "Electro house Electropop", + "Album": "Just a tease" + }, + { + "Number": 5, + "Title": "Golden River", + "Released": "15 Nov 2019", + "Genre": "*", + "Album": "Just a tease" + }, + { + "Number": 6, + "Title": "Burning in the Shadow", + "Released": "18 Apr 2019", + "Genre": "Crunk reggaeton", + "Album": "Just a tease" + }, + { + "Number": 7, + "Title": "Shadow of Sky", + "Released": "06 Sep 2019", + "Genre": "Crunk reggaeton", + "Album": "Just a tease" + }, + { + "Number": 8, + "Title": "Gentle Waiting", + "Released": "05 Dec 2019", + "Genre": "R&B", + "Album": "Just a tease" + }, + { + "Number": 9, + "Title": "Bright River", + "Released": "27 Jan 2020", + "Genre": "R&B", + "Album": "Just a tease" + }, + { + "Number": 10, + "Title": "Heart of Storm", + "Released": "07 Jan 2019", + "Genre": "Synth-pop R&B", + "Album": "Just a tease" + } + ] + } + ] + }, + { + "ID": 8, + "Artist": "Siri Jakobsson", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/siri.jpg", + "Debut": 1990, + "GrammyNominations": 2, + "GrammyAwards": 8, + "HasGrammyAward": true, + "Tours": [ + { + "Tour": "Basket case", + "StartedOn": "Jan 07", + "Location": "Europe, Asia", + "Headliner": "NO", + "TouredBy": "Siri Jakobsson" + }, + { + "Tour": "The bigger fish", + "StartedOn": "Dec 07", + "Location": "United States, Europe", + "Headliner": "YES", + "TouredBy": "Siri Jakobsson" + }, + { + "Tour": "Missed the boat", + "StartedOn": "Jun 09", + "Location": "Europe, Asia", + "Headliner": "NO", + "TouredBy": "Siri Jakobsson" + }, + { + "Tour": "Equivalent exchange", + "StartedOn": "Feb 06", + "Location": "United States, Europe", + "Headliner": "YES", + "TouredBy": "Siri Jakobsson" + }, + { + "Tour": "Damage control", + "StartedOn": "Oct 11", + "Location": "Australia, United States", + "Headliner": "NO", + "TouredBy": "Siri Jakobsson" + } + ], + "Albums": [ + { + "Album": "Under the bus", + "LaunchDate": "May 14, 2000", + "BillboardReview": 67, + "USBillboard200": 67, + "Artist": "Siri Jakobsson", + "Songs": [ + { + "Number": 1, + "Title": "Jack Broke My Heart At Tesco's", + "Released": "19 Jan 2020", + "Genre": "*", + "Album": "Under the bus" + }, + { + "Number": 2, + "Title": "Cat Deep, Hats High", + "Released": "5 Dec 2019", + "Genre": "*", + "Album": "Under the bus" + }, + { + "Number": 3, + "Title": "In Snail We Trust", + "Released": "31 May 2019", + "Genre": "hardcore opera", + "Album": "Under the bus" + }, + { + "Number": 4, + "Title": "Liz's Waiting", + "Released": "22 Jul 2019", + "Genre": "emotional C-jam ", + "Album": "Under the bus" + }, + { + "Number": 5, + "Title": "Lifeless Blues", + "Released": "14 Jun 2019", + "Genre": "*", + "Album": "Under the bus" + }, + { + "Number": 6, + "Title": "I Spin", + "Released": "26 Mar 2019", + "Genre": "*", + "Album": "Under the bus" + }, + { + "Number": 7, + "Title": "Ring of Rock", + "Released": "12 Dec 2019", + "Genre": "*", + "Album": "Under the bus" + }, + { + "Number": 8, + "Title": "Livin' on a Rock", + "Released": "17 Apr 2019", + "Genre": "*", + "Album": "Under the bus" + }, + { + "Number": 9, + "Title": "Your Lifeless Heart", + "Released": "15 Sep 2019", + "Genre": "adult calypso-industrial", + "Album": "Under the bus" + }, + { + "Number": 10, + "Title": "The High Street on My Mind", + "Released": "11 Nov 2019", + "Genre": "calypso and mariachi", + "Album": "Under the bus" + }, + { + "Number": 11, + "Title": "Behind Ugly Curtains", + "Released": "8 May 2019", + "Genre": "*", + "Album": "Under the bus" + }, + { + "Number": 12, + "Title": "Where Have All the Curtains Gone?", + "Released": "28 Jun 2019", + "Genre": "*", + "Album": "Under the bus" + }, + { + "Number": 13, + "Title": "Ghost in My Apple", + "Released": "14 Dec 2019", + "Genre": "*", + "Album": "Under the bus" + }, + { + "Number": 14, + "Title": "I Chatter", + "Released": "30 Nov 2019", + "Genre": "*", + "Album": "Under the bus" + } + ] + } + ] + }, + { + "ID": 9, + "Artist": "Pablo Cambeiro", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/pablo.jpg", + "Debut": 2011, + "GrammyNominations": 5, + "GrammyAwards": 0, + "HasGrammyAward": false, + "Tours": [ + { + "Tour": "Beads", + "StartedOn": "May 11", + "Location": "Worldwide", + "Headliner": "NO", + "TouredBy": "Pablo Cambeiro" + }, + { + "Tour": "Concept art", + "StartedOn": "Dec 18", + "Location": "United States", + "Headliner": "YES", + "TouredBy": "Pablo Cambeiro" + }, + { + "Tour": "Glass shoe", + "StartedOn": "Jan 20", + "Location": "Worldwide", + "Headliner": "YES", + "TouredBy": "Pablo Cambeiro" + }, + { + "Tour": "Pushing buttons", + "StartedOn": "Feb 15", + "Location": "Europe, Asia", + "Headliner": "NO", + "TouredBy": "Pablo Cambeiro" + }, + { + "Tour": "Dark matters", + "StartedOn": "Jan 04", + "Location": "Australia, United States", + "Headliner": "YES", + "TouredBy": "Pablo Cambeiro" + }, + { + "Tour": "Greener grass", + "StartedOn": "Sep 09", + "Location": "United States, Europe", + "Headliner": "NO", + "TouredBy": "Pablo Cambeiro" + }, + { + "Tour": "Apparatus", + "StartedOn": "Nov 16", + "Location": "Europe", + "Headliner": "NO", + "TouredBy": "Pablo Cambeiro" + } + ], + "Albums": [ + { + "Album": "Fluke", + "LaunchDate": "August 4, 2017", + "BillboardReview": 93, + "USBillboard200": 98, + "Artist": "Pablo Cambeiro", + "Songs": [ + { + "Number": 1, + "Title": "Dancing in the Echo", + "Released": "03 Oct 2019", + "Genre": "Crunk reggaeton", + "Album": "Fluke" + }, + { + "Number": 2, + "Title": "Dream of Dream", + "Released": "03 Mar 2019", + "Genre": "*", + "Album": "Fluke" + }, + { + "Number": 3, + "Title": "Calling in the Echo", + "Released": "16 Sep 2019", + "Genre": "*", + "Album": "Fluke" + }, + { + "Number": 4, + "Title": "Light of Light", + "Released": "25 May 2019", + "Genre": "Electro house Electropop", + "Album": "Fluke" + }, + { + "Number": 5, + "Title": "Bright Light", + "Released": "21 Mar 2019", + "Genre": "R&B", + "Album": "Fluke" + }, + { + "Number": 6, + "Title": "Storm of Echo", + "Released": "17 Jul 2019", + "Genre": "Synth-pop R&B", + "Album": "Fluke" + }, + { + "Number": 7, + "Title": "Lonely Calling", + "Released": "10 Apr 2019", + "Genre": "ethno-tunes", + "Album": "Fluke" + }, + { + "Number": 8, + "Title": "Gentle Falling", + "Released": "28 Nov 2019", + "Genre": "Synth-pop R&B", + "Album": "Fluke" + }, + { + "Number": 9, + "Title": "Wild Flying", + "Released": "26 Nov 2019", + "Genre": "Crunk reggaeton", + "Album": "Fluke" + }, + { + "Number": 10, + "Title": "Sky of Dream", + "Released": "29 May 2019", + "Genre": "R&B", + "Album": "Fluke" + } + ] + }, + { + "Album": "Crowd control", + "LaunchDate": "August 26, 2003", + "BillboardReview": 68, + "USBillboard200": 84, + "Artist": "Pablo Cambeiro", + "Songs": [ + { + "Number": 1, + "Title": "My Bed on My Mind", + "Released": "25 Mar 2019", + "Genre": "ethno-tunes", + "Album": "Crowd control" + }, + { + "Number": 2, + "Title": "Bright Blues", + "Released": "28 Sep 2019", + "Genre": "neuro-tunes", + "Album": "Crowd control" + }, + { + "Number": 3, + "Title": "Sail, Sail, Sail!", + "Released": "5 Mar 2019", + "Genre": "*", + "Album": "Crowd control" + }, + { + "Number": 4, + "Title": "Hotel My Bed", + "Released": "22 Mar 2019", + "Genre": "*", + "Album": "Crowd control" + }, + { + "Number": 5, + "Title": "Gonna Make You Mash", + "Released": "18 May 2019", + "Genre": "*", + "Album": "Crowd control" + }, + { + "Number": 6, + "Title": "Straight Outta America", + "Released": "16 Jan 2020", + "Genre": "hardcore opera", + "Album": "Crowd control" + }, + { + "Number": 7, + "Title": "I Drive", + "Released": "23 Feb 2019", + "Genre": "emotional C-jam ", + "Album": "Crowd control" + }, + { + "Number": 8, + "Title": "Like a Teddy", + "Released": "31 Aug 2019", + "Genre": "*", + "Album": "Crowd control" + }, + { + "Number": 9, + "Title": "Teddy Boogie", + "Released": "30 Nov 2019", + "Genre": "*", + "Album": "Crowd control" + } + ] + } + ] + }, + { + "ID": 10, + "Artist": "Athar Malakooti", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/athar.jpg", + "Debut": 2017, + "GrammyNominations": 0, + "GrammyAwards": 0, + "HasGrammyAward": false, + "Tours": [ + + ], + "Albums": [ + { + "Album": "Pushing up daisies", + "LaunchDate": "February 24, 2016", + "BillboardReview": 74, + "USBillboard200": 77, + "Artist": "Athar Malakooti", + "Songs": [ + { + "Number": 1, + "Title": "Hiding in the Whisper", + "Released": "03 Apr 2019", + "Genre": "R&B", + "Album": "Pushing up daisies" + }, + { + "Number": 2, + "Title": "Wicked Light", + "Released": "21 Aug 2019", + "Genre": "R&B", + "Album": "Pushing up daisies" + }, + { + "Number": 3, + "Title": "Flying in the River", + "Released": "03 Feb 2020", + "Genre": "Synth-pop R&B", + "Album": "Pushing up daisies" + }, + { + "Number": 4, + "Title": "Wicked Hiding", + "Released": "15 Sep 2019", + "Genre": "Synth-pop R&B", + "Album": "Pushing up daisies" + }, + { + "Number": 5, + "Title": "Lonely Light", + "Released": "13 May 2019", + "Genre": "Electro house Electropop", + "Album": "Pushing up daisies" + }, + { + "Number": 6, + "Title": "Bright Dancing", + "Released": "10 Apr 2019", + "Genre": "Synth-pop R&B", + "Album": "Pushing up daisies" + }, + { + "Number": 7, + "Title": "Gentle Dream", + "Released": "21 May 2019", + "Genre": "*", + "Album": "Pushing up daisies" + }, + { + "Number": 8, + "Title": "Sky of Echo", + "Released": "09 Jun 2019", + "Genre": "Synth-pop R&B", + "Album": "Pushing up daisies" + }, + { + "Number": 9, + "Title": "Breaking in the Sky", + "Released": "27 Dec 2019", + "Genre": "Crunk reggaeton", + "Album": "Pushing up daisies" + }, + { + "Number": 10, + "Title": "Whisper of Shadow", + "Released": "04 Jan 2019", + "Genre": "ethno-tunes", + "Album": "Pushing up daisies" + } + ] + } + ] + }, + { + "ID": 11, + "Artist": "Marti Valencia", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/marti.jpg", + "Debut": 2004, + "GrammyNominations": 1, + "GrammyAwards": 1, + "HasGrammyAward": true, + "Tours": [ + { + "Tour": "Cat eat cat world", + "StartedOn": "Sep 00", + "Location": "Worldwide", + "Headliner": "YES", + "TouredBy": "Marti Valencia" + }, + { + "Tour": "Final straw", + "StartedOn": "Sep 06", + "Location": "United States, Europe", + "Headliner": "NO", + "TouredBy": "Marti Valencia" + } + ], + "Albums": [ + { + "Album": "Nemesis", + "LaunchDate": "June 30, 2004", + "BillboardReview": 94, + "USBillboard200": 9, + "Artist": "Marti Valencia", + "Songs": [ + { + "Number": 1, + "Title": "Hiding in the Sky", + "Released": "26 Nov 2019", + "Genre": "Synth-pop R&B", + "Album": "Nemesis" + }, + { + "Number": 2, + "Title": "Waiting in the Echo", + "Released": "10 Jul 2019", + "Genre": "ethno-tunes", + "Album": "Nemesis" + }, + { + "Number": 3, + "Title": "Wicked Shadow", + "Released": "29 Jul 2019", + "Genre": "Synth-pop R&B", + "Album": "Nemesis" + }, + { + "Number": 4, + "Title": "Crying in the Whisper", + "Released": "09 Apr 2019", + "Genre": "*", + "Album": "Nemesis" + }, + { + "Number": 5, + "Title": "Echo of Storm", + "Released": "19 Nov 2019", + "Genre": "Crunk reggaeton", + "Album": "Nemesis" + }, + { + "Number": 6, + "Title": "Shadow of Sky", + "Released": "24 Jul 2019", + "Genre": "Crunk reggaeton", + "Album": "Nemesis" + }, + { + "Number": 7, + "Title": "Golden Hiding", + "Released": "12 Dec 2019", + "Genre": "Electro house Electropop", + "Album": "Nemesis" + }, + { + "Number": 8, + "Title": "Wild Dancing", + "Released": "17 Aug 2019", + "Genre": "Synth-pop R&B", + "Album": "Nemesis" + }, + { + "Number": 9, + "Title": "Bright Burning", + "Released": "30 Aug 2019", + "Genre": "Electro house Electropop", + "Album": "Nemesis" + }, + { + "Number": 10, + "Title": "Flying in the River", + "Released": "02 Sep 2019", + "Genre": "*", + "Album": "Nemesis" + } + ] + }, + { + "Album": "First chance", + "LaunchDate": "January 7, 2019", + "BillboardReview": 96, + "USBillboard200": 19, + "Artist": "Marti Valencia", + "Songs": [ + { + "Number": 1, + "Title": "My Name is Jason", + "Released": "12 Jul 2019", + "Genre": "*", + "Album": "First chance" + }, + { + "Number": 2, + "Title": "Amazing Andy", + "Released": "5 Mar 2019", + "Genre": "*", + "Album": "First chance" + }, + { + "Number": 3, + "Title": "The Number of your Knight", + "Released": "4 Dec 2019", + "Genre": "*", + "Album": "First chance" + }, + { + "Number": 4, + "Title": "I Sail", + "Released": "3 Mar 2019", + "Genre": "*", + "Album": "First chance" + }, + { + "Number": 5, + "Title": "Goody Two Hands", + "Released": "11 Oct 2019", + "Genre": "Electro house Electropop", + "Album": "First chance" + }, + { + "Number": 6, + "Title": "Careful With That Knife", + "Released": "18 Dec 2019", + "Genre": "R&B", + "Album": "First chance" + }, + { + "Number": 7, + "Title": "Four Single Ants", + "Released": "18 Jan 2020", + "Genre": "*", + "Album": "First chance" + }, + { + "Number": 8, + "Title": "Kiss Forever", + "Released": "10 Aug 2019", + "Genre": "*", + "Album": "First chance" + }, + { + "Number": 9, + "Title": "Rich's Waiting", + "Released": "15 Mar 2019", + "Genre": "Synth-pop R&B", + "Album": "First chance" + }, + { + "Number": 10, + "Title": "Japan is Your Land", + "Released": "7 Mar 2019", + "Genre": "ethno-tunes", + "Album": "First chance" + }, + { + "Number": 11, + "Title": "Pencils in My Banana", + "Released": "21 Jun 2019", + "Genre": "Crunk reggaeton", + "Album": "First chance" + }, + { + "Number": 12, + "Title": "I Sail in Your Arms", + "Released": "30 Apr 2019", + "Genre": "Synth-pop R&B", + "Album": "First chance" + } + ] + }, + { + "Album": "God's advocate", + "LaunchDate": "April 29, 2007", + "BillboardReview": 66, + "USBillboard200": 37, + "Artist": "Marti Valencia", + "Songs": [ + { + "Number": 1, + "Title": "Wild River", + "Released": "11 Jan 2019", + "Genre": "*", + "Album": "God's advocate" + }, + { + "Number": 2, + "Title": "Wicked Whisper", + "Released": "16 Feb 2019", + "Genre": "Electro house Electropop", + "Album": "God's advocate" + }, + { + "Number": 3, + "Title": "Storm of Heart", + "Released": "11 Aug 2019", + "Genre": "*", + "Album": "God's advocate" + }, + { + "Number": 4, + "Title": "Golden Dancing", + "Released": "02 Mar 2019", + "Genre": "Crunk reggaeton", + "Album": "God's advocate" + }, + { + "Number": 5, + "Title": "Calling in the Sky", + "Released": "10 Sep 2019", + "Genre": "Electro house Electropop", + "Album": "God's advocate" + }, + { + "Number": 6, + "Title": "Calling in the Heart", + "Released": "12 Jan 2019", + "Genre": "ethno-tunes", + "Album": "God's advocate" + }, + { + "Number": 7, + "Title": "Running in the Storm", + "Released": "10 Nov 2019", + "Genre": "Synth-pop R&B", + "Album": "God's advocate" + }, + { + "Number": 8, + "Title": "Wild Sky", + "Released": "10 Apr 2019", + "Genre": "R&B", + "Album": "God's advocate" + }, + { + "Number": 9, + "Title": "Crying in the Shadow", + "Released": "02 Mar 2019", + "Genre": "R&B", + "Album": "God's advocate" + }, + { + "Number": 10, + "Title": "Whisper of River", + "Released": "12 May 2019", + "Genre": "*", + "Album": "God's advocate" + } + ] + } + ] + }, + { + "ID": 12, + "Artist": "Alicia Stanger", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/alicia.jpg", + "Debut": 2010, + "GrammyNominations": 1, + "GrammyAwards": 0, + "HasGrammyAward": false, + "Tours": [ + + ], + "Albums": [ + { + "Album": "Forever alone", + "LaunchDate": "November 3, 2005", + "BillboardReview": 82, + "USBillboard200": 7, + "Artist": "Alicia Stanger", + "Songs": [ + { + "Number": 1, + "Title": "Shadow of Light", + "Released": "24 Mar 2019", + "Genre": "ethno-tunes", + "Album": "Forever alone" + }, + { + "Number": 2, + "Title": "Running in the Echo", + "Released": "03 May 2019", + "Genre": "Crunk reggaeton", + "Album": "Forever alone" + }, + { + "Number": 3, + "Title": "Gentle Dream", + "Released": "24 Aug 2019", + "Genre": "Crunk reggaeton", + "Album": "Forever alone" + }, + { + "Number": 4, + "Title": "Furious River", + "Released": "24 Apr 2019", + "Genre": "ethno-tunes", + "Album": "Forever alone" + }, + { + "Number": 5, + "Title": "Wild Whisper", + "Released": "09 Mar 2019", + "Genre": "ethno-tunes", + "Album": "Forever alone" + }, + { + "Number": 6, + "Title": "Whisper of Sky", + "Released": "24 Jul 2019", + "Genre": "Crunk reggaeton", + "Album": "Forever alone" + }, + { + "Number": 7, + "Title": "Lonely Storm", + "Released": "01 May 2019", + "Genre": "Crunk reggaeton", + "Album": "Forever alone" + }, + { + "Number": 8, + "Title": "Dancing in the River", + "Released": "17 Dec 2019", + "Genre": "*", + "Album": "Forever alone" + }, + { + "Number": 9, + "Title": "Electric Fire", + "Released": "17 Oct 2019", + "Genre": "Electro house Electropop", + "Album": "Forever alone" + }, + { + "Number": 10, + "Title": "Electric Sky", + "Released": "25 Sep 2019", + "Genre": "ethno-tunes", + "Album": "Forever alone" + } + ] + } + ] + }, + { + "ID": 13, + "Artist": "Peter Taylor", + "Photo": "https://static.infragistics.com/xplatform/images/people/names/peter.jpg", + "Debut": 2005, + "GrammyNominations": 0, + "GrammyAwards": 2, + "HasGrammyAward": true, + "Tours": [ + { + "Tour": "Love", + "StartedOn": "Jun 04", + "Location": "Europe, Asia", + "Headliner": "YES", + "TouredBy": "Peter Taylor" + }, + { + "Tour": "Fault of treasures", + "StartedOn": "Oct 13", + "Location": "North America", + "Headliner": "NO", + "TouredBy": "Peter Taylor" + }, + { + "Tour": "For eternity", + "StartedOn": "Mar 05", + "Location": "United States", + "Headliner": "YES", + "TouredBy": "Peter Taylor" + }, + { + "Tour": "Time flies", + "StartedOn": "Jun 03", + "Location": "North America", + "Headliner": "NO", + "TouredBy": "Peter Taylor" + }, + { + "Tour": "Highest difficulty", + "StartedOn": "Nov 01", + "Location": "Worldwide", + "Headliner": "YES", + "TouredBy": "Peter Taylor" + }, + { + "Tour": "Sleeping dogs", + "StartedOn": "May 04", + "Location": "United States, Europe", + "Headliner": "NO", + "TouredBy": "Peter Taylor" + } + ], + "Albums": [ + { + "Album": "Decisions decisions", + "LaunchDate": "April 10, 2008", + "BillboardReview": 85, + "USBillboard200": 35, + "Artist": "Peter Taylor", + "Songs": [ + { + "Number": 1, + "Title": "Calling in the Dream", + "Released": "01 Aug 2019", + "Genre": "R&B", + "Album": "Decisions decisions" + }, + { + "Number": 2, + "Title": "Electric Burning", + "Released": "10 Sep 2019", + "Genre": "Electro house Electropop", + "Album": "Decisions decisions" + }, + { + "Number": 3, + "Title": "Dark Flying", + "Released": "28 Apr 2019", + "Genre": "*", + "Album": "Decisions decisions" + }, + { + "Number": 4, + "Title": "Gentle Sky", + "Released": "20 Nov 2019", + "Genre": "ethno-tunes", + "Album": "Decisions decisions" + }, + { + "Number": 5, + "Title": "Gentle Calling", + "Released": "13 Jan 2019", + "Genre": "Crunk reggaeton", + "Album": "Decisions decisions" + }, + { + "Number": 6, + "Title": "Golden Falling", + "Released": "14 Feb 2019", + "Genre": "Crunk reggaeton", + "Album": "Decisions decisions" + }, + { + "Number": 7, + "Title": "Silent River", + "Released": "13 Feb 2019", + "Genre": "R&B", + "Album": "Decisions decisions" + }, + { + "Number": 8, + "Title": "Furious Calling", + "Released": "11 Jun 2019", + "Genre": "Synth-pop R&B", + "Album": "Decisions decisions" + }, + { + "Number": 9, + "Title": "Running in the Echo", + "Released": "06 Nov 2019", + "Genre": "Electro house Electropop", + "Album": "Decisions decisions" + }, + { + "Number": 10, + "Title": "Furious River", + "Released": "12 Mar 2019", + "Genre": "*", + "Album": "Decisions decisions" + } + ] + }, + { + "Album": "Climate changed", + "LaunchDate": "June 20, 2015", + "BillboardReview": 66, + "USBillboard200": 89, + "Artist": "Peter Taylor", + "Songs": [ + { + "Number": 1, + "Title": "Dark Crying", + "Released": "27 Apr 2019", + "Genre": "Electro house Electropop", + "Album": "Climate changed" + }, + { + "Number": 2, + "Title": "Dark Waiting", + "Released": "14 Nov 2019", + "Genre": "Synth-pop R&B", + "Album": "Climate changed" + }, + { + "Number": 3, + "Title": "Furious Waiting", + "Released": "23 May 2019", + "Genre": "*", + "Album": "Climate changed" + }, + { + "Number": 4, + "Title": "Running in the Echo", + "Released": "29 Nov 2019", + "Genre": "Crunk reggaeton", + "Album": "Climate changed" + }, + { + "Number": 5, + "Title": "Dream of Sky", + "Released": "31 Oct 2019", + "Genre": "Crunk reggaeton", + "Album": "Climate changed" + }, + { + "Number": 6, + "Title": "Hiding in the Heart", + "Released": "09 Aug 2019", + "Genre": "R&B", + "Album": "Climate changed" + }, + { + "Number": 7, + "Title": "Sky of Storm", + "Released": "01 Jun 2019", + "Genre": "R&B", + "Album": "Climate changed" + }, + { + "Number": 8, + "Title": "Light of Storm", + "Released": "17 Jan 2020", + "Genre": "ethno-tunes", + "Album": "Climate changed" + }, + { + "Number": 9, + "Title": "Light of Sky", + "Released": "26 May 2019", + "Genre": "*", + "Album": "Climate changed" + }, + { + "Number": 10, + "Title": "Golden River", + "Released": "19 Jun 2019", + "Genre": "*", + "Album": "Climate changed" + } + ] + } + ] + } +] \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.css b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.css new file mode 100644 index 0000000000..6d5b01d9a4 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.css @@ -0,0 +1,13 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ + + #hGrid { + --ig-size: var(--ig-size-medium); + } + + #hGrid { + --ig-grid-cell-selected-text-color: #FFFFFF; + --ig-grid-cell-active-border-color: #f2c43c; + --ig-grid-cell-selected-background: #0062a3; + } + diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx new file mode 100644 index 0000000000..89eeac8e0b --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx @@ -0,0 +1,212 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; + +import { IgrPropertyEditorPanelModule } from 'igniteui-react-layouts'; +import { IgrHierarchicalGridModule } from 'igniteui-react-grids'; +import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from 'igniteui-react-layouts'; +import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from 'igniteui-react-grids'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebHierarchicalGridDescriptionModule } from 'igniteui-react-core'; +import SingersData from './SingersData.json'; + +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +const mods: any[] = [ + IgrPropertyEditorPanelModule, + IgrHierarchicalGridModule +]; +mods.forEach((m) => m.register()); + +export default class Sample extends React.Component { + private propertyEditor: IgrPropertyEditorPanel + private propertyEditorRef(r: IgrPropertyEditorPanel) { + this.propertyEditor = r; + this.setState({}); + } + private cellSelectionEditor: IgrPropertyEditorPropertyDescription + private hGrid: IgrHierarchicalGrid + private hGridRef(r: IgrHierarchicalGrid) { + this.hGrid = r; + this.setState({}); + } + + constructor(props: any) { + super(props); + + this.propertyEditorRef = this.propertyEditorRef.bind(this); + this.hGridRef = this.hGridRef.bind(this); + } + + public render(): JSX.Element { + return ( +
+
+ + + + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); + } + + private _singersData: any[] = SingersData; + public get singersData(): any[] { + return this._singersData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + WebHierarchicalGridDescriptionModule.register(context); + } + return this._componentRenderer; + } + +} + +// 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/hierarchical-grid/cell-selection-custom-palette/tsconfig.json b/samples/grids/hierarchical-grid/cell-selection-custom-palette/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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" + ] +} diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/vite.config.js b/samples/grids/hierarchical-grid/cell-selection-custom-palette/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/.devcontainer/devcontainer.json b/samples/grids/tree-grid/cell-selection-custom-palette/.devcontainer/devcontainer.json new file mode 100644 index 0000000000..e0b8e9c925 --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/.devcontainer/devcontainer.json @@ -0,0 +1,4 @@ +{ + "name": "Node.js", + "image": "mcr.microsoft.com/devcontainers/javascript-node:22" +} \ No newline at end of file diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/.eslintrc.js b/samples/grids/tree-grid/cell-selection-custom-palette/.eslintrc.js new file mode 100644 index 0000000000..7168b71441 --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/.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" + } + } + ] + }; \ No newline at end of file diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/ReadMe.md b/samples/grids/tree-grid/cell-selection-custom-palette/ReadMe.md new file mode 100644 index 0000000000..f83c8757d2 --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Cell Selection Style feature using [Tree 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/tree-grid/cell-selection-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/tree-grid/cell-selection-custom-palette/index.html b/samples/grids/tree-grid/cell-selection-custom-palette/index.html new file mode 100644 index 0000000000..fd8d08d532 --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/index.html @@ -0,0 +1,12 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + + \ No newline at end of file diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/package.json b/samples/grids/tree-grid/cell-selection-custom-palette/package.json new file mode 100644 index 0000000000..1f4c711365 --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/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": "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.3.0-rc.2", + "igniteui-react-core": "19.2.2", + "igniteui-react-grids": "^19.2.0", + "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" + ] +} diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/sandbox.config.json b/samples/grids/tree-grid/cell-selection-custom-palette/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/src/OrdersTreeData.ts b/samples/grids/tree-grid/cell-selection-custom-palette/src/OrdersTreeData.ts new file mode 100644 index 0000000000..97749e00f3 --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/src/OrdersTreeData.ts @@ -0,0 +1,49 @@ +export class OrdersTreeDataItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public ID: number; + public ParentID: number; + public Name: string; + public Category: string; + public OrderDate: string; + public Units: number; + public UnitPrice: number; + public Price: number; + public Delivered: boolean; + +} +export class OrdersTreeData extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new OrdersTreeDataItem({ ID: 1, ParentID: -1, Name: `Order 1`, Category: ``, OrderDate: `2010-02-17`, Units: 1844, UnitPrice: 3.73, Price: 6884.38, Delivered: true }), + new OrdersTreeDataItem({ ID: 101, ParentID: 1, Name: `Chocolate Chip Cookies`, Category: `Cookies`, OrderDate: `2010-02-17`, Units: 834, UnitPrice: 3.59, Price: 2994.06, Delivered: true }), + new OrdersTreeDataItem({ ID: 102, ParentID: 1, Name: `Red Apples`, Category: `Fruit`, OrderDate: `2010-02-17`, Units: 371, UnitPrice: 3.66, Price: 1357.86, Delivered: true }), + new OrdersTreeDataItem({ ID: 103, ParentID: 1, Name: `Butter`, Category: `Diary`, OrderDate: `2010-02-17`, Units: 260, UnitPrice: 3.45, Price: 897, Delivered: true }), + new OrdersTreeDataItem({ ID: 104, ParentID: 1, Name: `Potato Chips`, Category: `Snack`, OrderDate: `2010-02-17`, Units: 118, UnitPrice: 1.96, Price: 231.28, Delivered: true }), + new OrdersTreeDataItem({ ID: 105, ParentID: 1, Name: `Orange Juice`, Category: `Beverages`, OrderDate: `2010-02-17`, Units: 261, UnitPrice: 5.38, Price: 1404.18, Delivered: true }), + new OrdersTreeDataItem({ ID: 2, ParentID: -1, Name: `Order 2`, Category: ``, OrderDate: `2022-05-27`, Units: 1831, UnitPrice: 8.23, Price: 15062.77, Delivered: false }), + new OrdersTreeDataItem({ ID: 201, ParentID: 2, Name: `Frozen Shrimps`, Category: `Seafood`, OrderDate: `2022-05-27`, Units: 120, UnitPrice: 20.45, Price: 2454, Delivered: false }), + new OrdersTreeDataItem({ ID: 202, ParentID: 2, Name: `Ice Tea`, Category: `Beverages`, OrderDate: `2022-05-27`, Units: 840, UnitPrice: 7, Price: 5880, Delivered: false }), + new OrdersTreeDataItem({ ID: 203, ParentID: 2, Name: `Fresh Cheese`, Category: `Diary`, OrderDate: `2022-05-27`, Units: 267, UnitPrice: 16.55, Price: 4418.85, Delivered: false }), + new OrdersTreeDataItem({ ID: 204, ParentID: 2, Name: `Carrots`, Category: `Vegetables`, OrderDate: `2022-05-27`, Units: 360, UnitPrice: 2.77, Price: 997.2, Delivered: false }), + new OrdersTreeDataItem({ ID: 205, ParentID: 2, Name: `Apple Juice`, Category: `Beverages`, OrderDate: `2022-05-27`, Units: 244, UnitPrice: 5.38, Price: 1312.72, Delivered: false }), + new OrdersTreeDataItem({ ID: 3, ParentID: -1, Name: `Order 3`, Category: ``, OrderDate: `2022-08-04`, Units: 1972, UnitPrice: 3.47, Price: 6849.18, Delivered: true }), + new OrdersTreeDataItem({ ID: 301, ParentID: 3, Name: `Skimmed Milk 1L`, Category: `Diary`, OrderDate: `2022-08-04`, Units: 1028, UnitPrice: 3.56, Price: 3659.68, Delivered: true }), + new OrdersTreeDataItem({ ID: 302, ParentID: 3, Name: `Bananas 5 Pack`, Category: `Fruit`, OrderDate: `2022-08-04`, Units: 370, UnitPrice: 6.36, Price: 2353.2, Delivered: true }), + new OrdersTreeDataItem({ ID: 303, ParentID: 3, Name: `Cauliflower`, Category: `Vegetables`, OrderDate: `2022-08-04`, Units: 283, UnitPrice: 0.95, Price: 268.85, Delivered: true }), + new OrdersTreeDataItem({ ID: 304, ParentID: 3, Name: `White Chocolate Cookies`, Category: `Cookies`, OrderDate: `2022-08-04`, Units: 291, UnitPrice: 1.95, Price: 567.45, Delivered: true }), + new OrdersTreeDataItem({ ID: 4, ParentID: -1, Name: `Order 4`, Category: ``, OrderDate: `2023-01-04`, Units: 1065, UnitPrice: 5.56, Price: 5923.5, Delivered: true }), + new OrdersTreeDataItem({ ID: 401, ParentID: 4, Name: `Mini Milk Chocolate Cookie Bites`, Category: `Cookies`, OrderDate: `2023-01-04`, Units: 68, UnitPrice: 2.25, Price: 153, Delivered: true }), + new OrdersTreeDataItem({ ID: 402, ParentID: 4, Name: `Wild Salmon Fillets`, Category: `Seafood`, OrderDate: `2023-01-04`, Units: 320, UnitPrice: 16.15, Price: 5168, Delivered: true }), + new OrdersTreeDataItem({ ID: 403, ParentID: 4, Name: `Diet Lemonade`, Category: `Beverages`, OrderDate: `2023-01-04`, Units: 437, UnitPrice: 0.5, Price: 218.5, Delivered: true }), + new OrdersTreeDataItem({ ID: 404, ParentID: 4, Name: `Potatoes`, Category: `Vegetables`, OrderDate: `2023-01-04`, Units: 240, UnitPrice: 1.6, Price: 384, Delivered: true }), + ]; + super(...newItems.slice(0)); + } + } +} diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/src/index.css b/samples/grids/tree-grid/cell-selection-custom-palette/src/index.css new file mode 100644 index 0000000000..61a75422c6 --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/src/index.css @@ -0,0 +1,13 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ + + #grid { + --ig-size: var(--ig-size-medium); + } + + #grid { + --cell-selected-text-color: #FFFFFF; + --cell-active-border-color: #f2c43c; + --cell-selected-background: #0062a3; + } + diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/src/index.tsx b/samples/grids/tree-grid/cell-selection-custom-palette/src/index.tsx new file mode 100644 index 0000000000..82db34ad1b --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/src/index.tsx @@ -0,0 +1,101 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; + +import { IgrTreeGridModule } from 'igniteui-react-grids'; +import { IgrTreeGrid, IgrColumn } from 'igniteui-react-grids'; +import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-react-core'; +import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData'; + +import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; + +const mods: any[] = [ + IgrTreeGridModule +]; +mods.forEach((m) => m.register()); + +export default class Sample extends React.Component { + private grid: IgrTreeGrid + private gridRef(r: IgrTreeGrid) { + this.grid = r; + this.setState({}); + } + + constructor(props: any) { + super(props); + + this.gridRef = this.gridRef.bind(this); + } + + public render(): JSX.Element { + return ( +
+ +
+ + + + + + + + + + + + + + +
+
+ ); + } + + private _ordersTreeData: OrdersTreeData = null; + public get ordersTreeData(): OrdersTreeData { + if (this._ordersTreeData == null) + { + this._ordersTreeData = new OrdersTreeData(); + } + return this._ordersTreeData; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + WebTreeGridDescriptionModule.register(context); + } + return this._componentRenderer; + } + +} + +// 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/tree-grid/cell-selection-custom-palette/tsconfig.json b/samples/grids/tree-grid/cell-selection-custom-palette/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/tsconfig.json @@ -0,0 +1,44 @@ +{ + "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, + "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" + ] +} diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/vite.config.js b/samples/grids/tree-grid/cell-selection-custom-palette/vite.config.js new file mode 100644 index 0000000000..1744dbc719 --- /dev/null +++ b/samples/grids/tree-grid/cell-selection-custom-palette/vite.config.js @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + build: { + outDir: 'build' + }, + server: { + open: false + }, +}); \ No newline at end of file From 1c6c22e83160ca879dd6896042a88adb17ad4934 Mon Sep 17 00:00:00 2001 From: tishko0 Date: Thu, 23 Oct 2025 11:29:47 +0300 Subject: [PATCH 3/5] fix(sample): updated grid sample --- .../src/index.css | 50 ++++++++++++++++--- .../src/index.tsx | 39 ++++++++++++--- 2 files changed, 74 insertions(+), 15 deletions(-) diff --git a/samples/grids/grid/cell-selection-custom-palette/src/index.css b/samples/grids/grid/cell-selection-custom-palette/src/index.css index 61a75422c6..088d932066 100644 --- a/samples/grids/grid/cell-selection-custom-palette/src/index.css +++ b/samples/grids/grid/cell-selection-custom-palette/src/index.css @@ -1,13 +1,47 @@ /* shared styles are loaded from: */ /* https://static.infragistics.com/xplatform/css/samples */ - #grid { - --ig-size: var(--ig-size-medium); - } +:root { + /* Base Palette Colors */ + --selection-primary: #0062a3; + --selection-primary-light: #338bc7; + --selection-primary-dark: #004d82; + --selection-secondary: #f2c43c; + --selection-accent: #e74c3c; + --selection-success: #27ae60; + --selection-text-light: #ffffff; + --selection-text-dark: #2c3e50; + --selection-border: #34495e; + --selection-hover: rgba(0, 98, 163, 0.1); + --selection-focus: rgba(242, 196, 60, 0.3); +} - #grid { - --cell-selected-text-color: #FFFFFF; - --cell-active-border-color: #f2c43c; - --cell-selected-background: #0062a3; - } +.custom-selection-palette { + /* Core cell selection properties */ + --ig-grid-cell-selected-background: var(--selection-primary); + --ig-grid-cell-selected-text-color: var(--selection-text-light); + --ig-grid-cell-active-border-color: var(--selection-secondary); + + /* Enhanced selection states */ + --ig-grid-cell-selected-range-background: var(--selection-primary-light); + --ig-grid-cell-selected-range-border-color: var(--selection-primary-dark); + --ig-grid-cell-hover-background: var(--selection-hover); + --ig-grid-cell-focus-background: var(--selection-focus); + + /* Header selection styling */ + --ig-grid-header-selected-background: var(--selection-primary); + --ig-grid-header-selected-text-color: var(--selection-text-light); + + /* Row selection integration */ + --ig-grid-row-selected-background: var(--selection-primary-light); + --ig-grid-row-selected-text-color: var(--selection-text-dark); + --ig-grid-row-selected-hover-background: var(--selection-primary); + + /* Selection indicators and borders */ + --ig-grid-selection-fill-color: var(--selection-secondary); + --ig-grid-selection-border-color: var(--selection-border); + + /* Grid sizing */ + --ig-size: var(--ig-size-medium); +} diff --git a/samples/grids/grid/cell-selection-custom-palette/src/index.tsx b/samples/grids/grid/cell-selection-custom-palette/src/index.tsx index 57508fa7ec..3781f7a2ba 100644 --- a/samples/grids/grid/cell-selection-custom-palette/src/index.tsx +++ b/samples/grids/grid/cell-selection-custom-palette/src/index.tsx @@ -34,22 +34,47 @@ export default class Sample extends React.Component { + cellSelection="multiple" + rowSelection="multiple" + columnSelection="multiple" + primaryKey="ID" + allowFiltering={true}> + field="ID" + header="Customer ID" + width="120px" + sortable={true}> + header="Company Name" + width="200px" + sortable={true}> + field="ContactName" + header="Contact" + width="150px" + sortable={true}> + field="City" + header="City" + width="120px" + sortable={true}> + + + + From 36bd6f6dfa9f375507dd202d9733f1cbd24343e0 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 23 Oct 2025 08:41:42 +0000 Subject: [PATCH 4/5] Apply palette structure and selection options to hgrid and tgrid samples Co-authored-by: tishko0 <15924795+tishko0@users.noreply.github.com> --- .../src/index.css | 50 ++++++++++++++++--- .../src/index.tsx | 19 +++++-- .../src/index.css | 50 ++++++++++++++++--- .../src/index.tsx | 31 +++++++++--- 4 files changed, 122 insertions(+), 28 deletions(-) diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.css b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.css index 6d5b01d9a4..088d932066 100644 --- a/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.css +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.css @@ -1,13 +1,47 @@ /* shared styles are loaded from: */ /* https://static.infragistics.com/xplatform/css/samples */ - #hGrid { - --ig-size: var(--ig-size-medium); - } +:root { + /* Base Palette Colors */ + --selection-primary: #0062a3; + --selection-primary-light: #338bc7; + --selection-primary-dark: #004d82; + --selection-secondary: #f2c43c; + --selection-accent: #e74c3c; + --selection-success: #27ae60; + --selection-text-light: #ffffff; + --selection-text-dark: #2c3e50; + --selection-border: #34495e; + --selection-hover: rgba(0, 98, 163, 0.1); + --selection-focus: rgba(242, 196, 60, 0.3); +} - #hGrid { - --ig-grid-cell-selected-text-color: #FFFFFF; - --ig-grid-cell-active-border-color: #f2c43c; - --ig-grid-cell-selected-background: #0062a3; - } +.custom-selection-palette { + /* Core cell selection properties */ + --ig-grid-cell-selected-background: var(--selection-primary); + --ig-grid-cell-selected-text-color: var(--selection-text-light); + --ig-grid-cell-active-border-color: var(--selection-secondary); + + /* Enhanced selection states */ + --ig-grid-cell-selected-range-background: var(--selection-primary-light); + --ig-grid-cell-selected-range-border-color: var(--selection-primary-dark); + --ig-grid-cell-hover-background: var(--selection-hover); + --ig-grid-cell-focus-background: var(--selection-focus); + + /* Header selection styling */ + --ig-grid-header-selected-background: var(--selection-primary); + --ig-grid-header-selected-text-color: var(--selection-text-light); + + /* Row selection integration */ + --ig-grid-row-selected-background: var(--selection-primary-light); + --ig-grid-row-selected-text-color: var(--selection-text-dark); + --ig-grid-row-selected-hover-background: var(--selection-primary); + + /* Selection indicators and borders */ + --ig-grid-selection-fill-color: var(--selection-secondary); + --ig-grid-selection-border-color: var(--selection-border); + + /* Grid sizing */ + --ig-size: var(--ig-size-medium); +} diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx index 89eeac8e0b..e45cb58b64 100644 --- a/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx @@ -64,13 +64,19 @@ export default class Sample extends React.Component { autoGenerate={false} data={this.singersData} id="hGrid" + className="custom-selection-palette" ref={this.hGridRef} - primaryKey="ID"> + primaryKey="ID" + cellSelection="multiple" + rowSelection="multiple" + columnSelection="multiple" + allowFiltering={true}> + resizable={true} + sortable={true}> { dataType="number" minWidth="88px" maxWidth="230px" - resizable={true}> + resizable={true} + sortable={true}> + resizable={true} + sortable={true}> + resizable={true} + sortable={true}> { autoGenerate={false} ref={this.gridRef} id="grid" + className="custom-selection-palette" data={this.ordersTreeData} primaryKey="ID" foreignKey="ParentID" - cellSelection="multiple"> + cellSelection="multiple" + rowSelection="multiple" + columnSelection="multiple" + allowFiltering={true}> + dataType="number" + width="120px" + sortable={true}> + header="Order Product" + width="200px" + sortable={true}> + dataType="number" + header="Units" + width="120px" + sortable={true}> + dataType="currency" + width="150px" + sortable={true}> + dataType="currency" + width="150px" + sortable={true}> + dataType="date" + width="150px" + sortable={true}> From 2c98a8ee36c3df665ae6bc23f0830f825f4bbd80 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 23 Oct 2025 08:55:04 +0000 Subject: [PATCH 5/5] Remove width constraints from all columns to allow grid auto-sizing Co-authored-by: tishko0 <15924795+tishko0@users.noreply.github.com> --- .../grid/cell-selection-custom-palette/src/index.tsx | 8 +------- .../cell-selection-custom-palette/src/index.tsx | 3 --- .../tree-grid/cell-selection-custom-palette/src/index.tsx | 6 ------ 3 files changed, 1 insertion(+), 16 deletions(-) diff --git a/samples/grids/grid/cell-selection-custom-palette/src/index.tsx b/samples/grids/grid/cell-selection-custom-palette/src/index.tsx index 3781f7a2ba..ba120cc22b 100644 --- a/samples/grids/grid/cell-selection-custom-palette/src/index.tsx +++ b/samples/grids/grid/cell-selection-custom-palette/src/index.tsx @@ -44,37 +44,31 @@ export default class Sample extends React.Component { + header="Phone"> diff --git a/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx index e45cb58b64..a29cef311e 100644 --- a/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx +++ b/samples/grids/hierarchical-grid/cell-selection-custom-palette/src/index.tsx @@ -82,15 +82,12 @@ export default class Sample extends React.Component { field="Photo" header="Photo" dataType="image" - minWidth="115px" resizable={true}> diff --git a/samples/grids/tree-grid/cell-selection-custom-palette/src/index.tsx b/samples/grids/tree-grid/cell-selection-custom-palette/src/index.tsx index ced4b86175..7cc65d5887 100644 --- a/samples/grids/tree-grid/cell-selection-custom-palette/src/index.tsx +++ b/samples/grids/tree-grid/cell-selection-custom-palette/src/index.tsx @@ -48,42 +48,36 @@ export default class Sample extends React.Component { field="ID" header="Order ID" dataType="number" - width="120px" sortable={true}>