From 76a2bba23e7c14811d5bb87c7ed48428c606e4ed Mon Sep 17 00:00:00 2001 From: ttonev Date: Tue, 21 May 2024 16:50:32 +0300 Subject: [PATCH 1/5] added grid and hgrid remote paging samples --- .../grid/remote-paging-grid/.eslintrc.js | 76 ++++++++++ .../grids/grid/remote-paging-grid/ReadMe.md | 56 ++++++++ .../grid/remote-paging-grid/package.json | 50 +++++++ .../grid/remote-paging-grid/public/index.html | 11 ++ .../remote-paging-grid/sandbox.config.json | 5 + .../src/RemotePagingService.ts | 34 +++++ .../grid/remote-paging-grid/src/index.css | 2 + .../grid/remote-paging-grid/src/index.tsx | 91 ++++++++++++ .../remote-paging-grid/src/react-app-env.d.ts | 1 + .../grid/remote-paging-grid/tsconfig.json | 45 ++++++ .../remote-paging-hgrid/.eslintrc.js | 76 ++++++++++ .../remote-paging-hgrid/ReadMe.md | 56 ++++++++ .../remote-paging-hgrid/package.json | 49 +++++++ .../remote-paging-hgrid/public/index.html | 11 ++ .../remote-paging-hgrid/sandbox.config.json | 5 + .../remote-paging-hgrid/src/RemoteService.ts | 38 +++++ .../remote-paging-hgrid/src/index.css | 2 + .../remote-paging-hgrid/src/index.tsx | 134 ++++++++++++++++++ .../src/react-app-env.d.ts | 1 + .../remote-paging-hgrid/tsconfig.json | 45 ++++++ 20 files changed, 788 insertions(+) create mode 100644 samples/grids/grid/remote-paging-grid/.eslintrc.js create mode 100644 samples/grids/grid/remote-paging-grid/ReadMe.md create mode 100644 samples/grids/grid/remote-paging-grid/package.json create mode 100644 samples/grids/grid/remote-paging-grid/public/index.html create mode 100644 samples/grids/grid/remote-paging-grid/sandbox.config.json create mode 100644 samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts create mode 100644 samples/grids/grid/remote-paging-grid/src/index.css create mode 100644 samples/grids/grid/remote-paging-grid/src/index.tsx create mode 100644 samples/grids/grid/remote-paging-grid/src/react-app-env.d.ts create mode 100644 samples/grids/grid/remote-paging-grid/tsconfig.json create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/.eslintrc.js create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/ReadMe.md create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/package.json create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/public/index.html create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/sandbox.config.json create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/src/RemoteService.ts create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.css create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/src/react-app-env.d.ts create mode 100644 samples/grids/hierarchical-grid/remote-paging-hgrid/tsconfig.json diff --git a/samples/grids/grid/remote-paging-grid/.eslintrc.js b/samples/grids/grid/remote-paging-grid/.eslintrc.js new file mode 100644 index 0000000000..9d283f6407 --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/.eslintrc.js @@ -0,0 +1,76 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-var": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/grids/grid/remote-paging-grid/ReadMe.md b/samples/grids/grid/remote-paging-grid/ReadMe.md new file mode 100644 index 0000000000..293b5455d0 --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Remote Paging Data 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/remote-paging-data +``` + +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/remote-paging-grid/package.json b/samples/grids/grid/remote-paging-grid/package.json new file mode 100644 index 0000000000..7fbadb1bbe --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/package.json @@ -0,0 +1,50 @@ +{ + "name": "example-ignite-ui-react", + "description": "This project provides example of using Ignite UI for React components", + "author": "Infragistics", + "version": "1.4.0", + "license": "", + "homepage": ".", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject", + "lint": "eslint ./src/**/*.{ts,tsx}" + }, + "dependencies": { + "igniteui-dockmanager": "1.14.3", + "igniteui-react": "18.6.0", + "igniteui-react-core": "18.6.0", + "igniteui-react-datasources": "18.6.0", + "igniteui-react-grids": "18.6.0", + "igniteui-react-inputs": "18.6.0", + "igniteui-react-layouts": "18.6.0", + "igniteui-webcomponents": "4.7.0", + "lit-html": "^2.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "rxjs": "^7.8.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "eslint": "^8.33.0", + "eslint-config-react": "^1.1.7", + "eslint-plugin-react": "^7.20.0", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/grids/grid/remote-paging-grid/public/index.html b/samples/grids/grid/remote-paging-grid/public/index.html new file mode 100644 index 0000000000..e2d3265576 --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/public/index.html @@ -0,0 +1,11 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + \ No newline at end of file diff --git a/samples/grids/grid/remote-paging-grid/sandbox.config.json b/samples/grids/grid/remote-paging-grid/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/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/remote-paging-grid/src/RemotePagingService.ts b/samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts new file mode 100644 index 0000000000..cce2a2f29d --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/src/RemotePagingService.ts @@ -0,0 +1,34 @@ +const URL = `https://data-northwind.indigo.design/`; + +export class RemoteService { + +public getData(dataState: any, index?: number, perPage?: number): any { + return fetch(this.buildUrl(dataState, index, perPage)) + .then((result) => result.json()); +} + +private buildUrl(dataState: any, index?: number, perPage?: number) { + let qS = ""; + if (dataState) { + qS += `${dataState.key}`; + } + + // Add index and perPage to the query string if they are defined + if (index !== undefined) { + qS += `?index=${index}`; + if (perPage !== undefined) { + qS += `&perPage=${perPage}`; + } + } else if (perPage !== undefined) { + qS += `?perPage=${perPage}`; + } + + return `${URL}${qS}`; +} + +public getDataLength(dataState: any): Promise { + return fetch(this.buildUrl(dataState)) + .then((result) => result.json()) + .then((data) => data.length); +} +} \ No newline at end of file diff --git a/samples/grids/grid/remote-paging-grid/src/index.css b/samples/grids/grid/remote-paging-grid/src/index.css new file mode 100644 index 0000000000..98682b8543 --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ diff --git a/samples/grids/grid/remote-paging-grid/src/index.tsx b/samples/grids/grid/remote-paging-grid/src/index.tsx new file mode 100644 index 0000000000..9a610647d8 --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/src/index.tsx @@ -0,0 +1,91 @@ +import React, { useEffect, useRef, useState } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; + +import { IgrGrid, IgrPaginator, IgrGridModule } from "igniteui-react-grids"; +import { IgrColumn } from "igniteui-react-grids"; + +import "igniteui-react-grids/grids/combined"; +import "igniteui-react-grids/grids/themes/light/bootstrap.css"; +import { RemoteService } from "./RemotePagingService"; + +IgrGridModule.register(); + +export default function App() { + let data = []; +const grid = useRef(null); +const paginator = useRef(null); +const remoteServiceInstance = new RemoteService(); +let [page] = useState(0); +let [perPage, setPerPage] = useState(15); + +useEffect(() => { + if (paginator.current) { + setPerPage(paginator.current.perPage ?? 15); + grid.current.isLoading = true; + } + + grid.current.isLoading = true; + loadData('Customers'); +}, [page, perPage]); + +function loadData(dataKey: string) { + const dataState = { key: dataKey }; + + // Set loading state + grid.current.isLoading = true; + + // Fetch data length + remoteServiceInstance.getDataLength(dataState).then((length: number) => { + paginator.current.totalRecords = length; + }); + + // Fetch data + remoteServiceInstance.getData(dataState).then((data: any[]) => { + grid.current.isLoading = false; + grid.current.data = data; + grid.current.markForCheck(); + }); + } + + function paginate(pageArgs: number) { + page = pageArgs; + const skip = page * perPage; + const top = perPage; + + remoteServiceInstance.getData({ key: 'Customers' }, skip, top).then((incData:any)=> { + data = incData; + grid.current.isLoading = false; + grid.current.markForCheck();// Update the UI after receiving data + }); +} + + return ( +
+
+ + paginate(evt.page)} + perPageChange={() => paginate(0)}> + + + + + + + + +
+
+ ); +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/grids/grid/remote-paging-grid/src/react-app-env.d.ts b/samples/grids/grid/remote-paging-grid/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/grids/grid/remote-paging-grid/tsconfig.json b/samples/grids/grid/remote-paging-grid/tsconfig.json new file mode 100644 index 0000000000..42c6ace1da --- /dev/null +++ b/samples/grids/grid/remote-paging-grid/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/.eslintrc.js b/samples/grids/hierarchical-grid/remote-paging-hgrid/.eslintrc.js new file mode 100644 index 0000000000..9d283f6407 --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/.eslintrc.js @@ -0,0 +1,76 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "no-var": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/ReadMe.md b/samples/grids/hierarchical-grid/remote-paging-hgrid/ReadMe.md new file mode 100644 index 0000000000..05f5ea9723 --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Data Performance Virtualization 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/data-performance-virtualization +``` + +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/remote-paging-hgrid/package.json b/samples/grids/hierarchical-grid/remote-paging-hgrid/package.json new file mode 100644 index 0000000000..64bed6f1bd --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/package.json @@ -0,0 +1,49 @@ +{ + "name": "example-ignite-ui-react", + "description": "This project provides example of using Ignite UI for React components", + "author": "Infragistics", + "version": "1.4.0", + "license": "", + "homepage": ".", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject", + "lint": "eslint ./src/**/*.{ts,tsx}" + }, + "dependencies": { + "igniteui-dockmanager": "1.14.3", + "igniteui-react": "18.6.0", + "igniteui-react-core": "18.6.0", + "igniteui-react-datasources": "18.6.0", + "igniteui-react-grids": "18.6.0", + "igniteui-react-inputs": "18.6.0", + "igniteui-react-layouts": "18.6.0", + "igniteui-webcomponents": "4.7.0", + "lit-html": "^2.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "eslint": "^8.33.0", + "eslint-config-react": "^1.1.7", + "eslint-plugin-react": "^7.20.0", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/public/index.html b/samples/grids/hierarchical-grid/remote-paging-hgrid/public/index.html new file mode 100644 index 0000000000..e2d3265576 --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/public/index.html @@ -0,0 +1,11 @@ + + + + Sample | Ignite UI | React | infragistics + + + + +
+ + \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/sandbox.config.json b/samples/grids/hierarchical-grid/remote-paging-hgrid/sandbox.config.json new file mode 100644 index 0000000000..07f53508eb --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/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/remote-paging-hgrid/src/RemoteService.ts b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/RemoteService.ts new file mode 100644 index 0000000000..d84e2be898 --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/RemoteService.ts @@ -0,0 +1,38 @@ +const URL = `https://data-northwind.indigo.design/`; + +export class RemoteService { + +public getData(dataState: any, index?: number, perPage?: number): any { + return fetch(this.buildUrl(dataState, index, perPage)) + .then((result) => result.json()); +} + +private buildUrl(dataState: any, index?: number, perPage?: number) { + let qS = ""; + if (dataState) { + if (dataState.rootLevel) { + qS += `${dataState.key}`; + } else { + qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`; + } + } + + // Add index and perPage to the query string if they are defined + if (index !== undefined) { + qS += `?index=${index}`; + if (perPage !== undefined) { + qS += `&perPage=${perPage}`; + } + } else if (perPage !== undefined) { + qS += `?perPage=${perPage}`; + } + + return `${URL}${qS}`; +} + +public getDataLength(dataState: any): Promise { + return fetch(this.buildUrl(dataState)) + .then((result) => result.json()) + .then((data) => data.length); +} +} \ No newline at end of file diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.css b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.css new file mode 100644 index 0000000000..98682b8543 --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx new file mode 100644 index 0000000000..1b827e5b87 --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx @@ -0,0 +1,134 @@ +import React, { useEffect, useRef, useState } from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; + +import { IgrGridCreatedEventArgs, IgrHierarchicalGridModule, IgrPaginator } from "igniteui-react-grids"; +import { IgrHierarchicalGrid, IgrColumn, IgrRowIsland } from "igniteui-react-grids"; + +import "igniteui-react-grids/grids/combined"; +import "igniteui-react-grids/grids/themes/light/bootstrap.css"; +import { RemoteService } from "./RemoteService"; + +IgrHierarchicalGridModule.register(); + +export default function App() { + let data = []; +const hierarchicalGrid = useRef(null); +const paginator = useRef(null); +const remoteServiceInstance = new RemoteService(); +let [page] = useState(0); +let [perPage, setPerPage] = useState(15); + +useEffect(() => { + if (paginator.current) { + setPerPage(paginator.current.perPage ?? 15); + hierarchicalGrid.current.isLoading = true; + } + + hierarchicalGrid.current.isLoading = true; + + remoteServiceInstance.getData({ parentID: null, rootLevel: true, key: "Customers", page, perPage }).then( + (data: any) => { + hierarchicalGrid.current.isLoading = false; + hierarchicalGrid.current.data = data; + hierarchicalGrid.current.markForCheck(); + } + ); +}, [page, perPage]); + + function gridCreated( + rowIsland: IgrRowIsland, + event: IgrGridCreatedEventArgs, + _parentKey: string + ) { + const context = event.detail; + const dataState = { + key: rowIsland.childDataKey, + parentID: context.parentID, + parentKey: _parentKey, + rootLevel: false, + }; + + context.grid.isLoading = true; + + remoteServiceInstance.getDataLength(dataState).then((length: number) => { + paginator.current.totalRecords = length; + }); + remoteServiceInstance.getData(dataState).then((data: any[]) => { + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); + }); + } + + function paginate(pageArgs: number) { + page = pageArgs; + const skip = page * perPage; + const top = perPage; + + remoteServiceInstance.getData({ parentID: null, rootLevel: true, key: 'Customers' }, skip, top).then((incData:any)=> { + data = incData; + hierarchicalGrid.current.isLoading = false; + hierarchicalGrid.current.markForCheck();// Update the UI after receiving data + }); +} + + return ( +
+
+ + + paginate(evt.page)} + perPageChange={() => paginate(0)}> + + + + + + + + gridCreated(rowIsland, e, "Customers")} + > + + + + + + + gridCreated(rowIsland, e, "Orders")} + > + + + + + + + + +
+
+ ); +} + +// rendering above component in the React DOM +const root = ReactDOM.createRoot(document.getElementById("root")); +root.render(); diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/react-app-env.d.ts b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/tsconfig.json b/samples/grids/hierarchical-grid/remote-paging-hgrid/tsconfig.json new file mode 100644 index 0000000000..42c6ace1da --- /dev/null +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/tsconfig.json @@ -0,0 +1,45 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "suppressImplicitAnyIndexErrors": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} From 81c8377ed29b47389d84c56b2d46098eed7b4284 Mon Sep 17 00:00:00 2001 From: ttonev Date: Wed, 4 Sep 2024 11:02:00 +0300 Subject: [PATCH 2/5] chore(grid): fixed type missed warning --- samples/grids/grid/remote-paging-grid/src/index.tsx | 3 ++- .../grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/samples/grids/grid/remote-paging-grid/src/index.tsx b/samples/grids/grid/remote-paging-grid/src/index.tsx index 9a610647d8..4d6b67a207 100644 --- a/samples/grids/grid/remote-paging-grid/src/index.tsx +++ b/samples/grids/grid/remote-paging-grid/src/index.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useRef, useState } from "react"; + import ReactDOM from "react-dom/client"; import "./index.css"; @@ -71,7 +72,7 @@ function loadData(dataKey: string) { paginate(evt.page)} + pageChange={(evt: { page: number }) => paginate(evt.page)} perPageChange={() => paginate(0)}> diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx index 1b827e5b87..6bcdad95e5 100644 --- a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx @@ -85,7 +85,7 @@ useEffect(() => { paginate(evt.page)} + pageChange={(evt: { page: number }) => paginate(evt.page)} perPageChange={() => paginate(0)}> From a2e3f4c9bd22c1835f0fa94492e49c4a399e14a1 Mon Sep 17 00:00:00 2001 From: Mariela Tihova Date: Tue, 10 Sep 2024 23:54:41 +0300 Subject: [PATCH 3/5] Fixed console errors for Hgrid remote paging --- .../remote-paging-hgrid/src/index.tsx | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx index 6bcdad95e5..a65cdbe5e1 100644 --- a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx @@ -12,16 +12,16 @@ import { RemoteService } from "./RemoteService"; IgrHierarchicalGridModule.register(); export default function App() { - let data = []; const hierarchicalGrid = useRef(null); const paginator = useRef(null); const remoteServiceInstance = new RemoteService(); -let [page] = useState(0); +let [page, setPage] = useState(0); let [perPage, setPerPage] = useState(15); +const [data, setData] = useState([]); useEffect(() => { if (paginator.current) { - setPerPage(paginator.current.perPage ?? 15); + setPerPage(paginator.current.perPage ?? perPage); hierarchicalGrid.current.isLoading = true; } @@ -29,9 +29,9 @@ useEffect(() => { remoteServiceInstance.getData({ parentID: null, rootLevel: true, key: "Customers", page, perPage }).then( (data: any) => { - hierarchicalGrid.current.isLoading = false; - hierarchicalGrid.current.data = data; - hierarchicalGrid.current.markForCheck(); + hierarchicalGrid.current.isLoading = false; + hierarchicalGrid.current.data = data; + hierarchicalGrid.current.markForCheck(); } ); }, [page, perPage]); @@ -52,22 +52,22 @@ useEffect(() => { context.grid.isLoading = true; remoteServiceInstance.getDataLength(dataState).then((length: number) => { - paginator.current.totalRecords = length; + paginator.current.totalRecords = length; }); remoteServiceInstance.getData(dataState).then((data: any[]) => { - context.grid.isLoading = false; - context.grid.data = data; - context.grid.markForCheck(); + context.grid.isLoading = false; + context.grid.data = data; + context.grid.markForCheck(); }); } function paginate(pageArgs: number) { - page = pageArgs; - const skip = page * perPage; + setPage(pageArgs); + const skip = pageArgs * perPage; const top = perPage; remoteServiceInstance.getData({ parentID: null, rootLevel: true, key: 'Customers' }, skip, top).then((incData:any)=> { - data = incData; + setData(incData); hierarchicalGrid.current.isLoading = false; hierarchicalGrid.current.markForCheck();// Update the UI after receiving data }); @@ -81,12 +81,14 @@ useEffect(() => { ref={hierarchicalGrid} primaryKey="customerId" height="600px" + data={data} > - paginate(evt.page)} - perPageChange={() => paginate(0)}> + paginate(evt.page)} + perPageChange={() => paginate(page)}> + From 43e33041faf718ffb94a56f8513ae557eabfc27f Mon Sep 17 00:00:00 2001 From: ttonev Date: Fri, 20 Sep 2024 10:18:25 +0300 Subject: [PATCH 4/5] docs(grid): removed old sample --- .../grid/remote-paging-data/.eslintrc.js | 76 --- .../grids/grid/remote-paging-data/ReadMe.md | 56 -- .../grid/remote-paging-data/package.json | 49 -- .../grid/remote-paging-data/public/index.html | 11 - .../remote-paging-data/sandbox.config.json | 5 - .../grid/remote-paging-data/src/NwindData.ts | 550 ------------------ .../grid/remote-paging-data/src/index.css | 2 - .../grid/remote-paging-data/src/index.tsx | 115 ---- .../remote-paging-data/src/react-app-env.d.ts | 1 - .../grid/remote-paging-data/tsconfig.json | 45 -- 10 files changed, 910 deletions(-) delete mode 100644 samples/grids/grid/remote-paging-data/.eslintrc.js delete mode 100644 samples/grids/grid/remote-paging-data/ReadMe.md delete mode 100644 samples/grids/grid/remote-paging-data/package.json delete mode 100644 samples/grids/grid/remote-paging-data/public/index.html delete mode 100644 samples/grids/grid/remote-paging-data/sandbox.config.json delete mode 100644 samples/grids/grid/remote-paging-data/src/NwindData.ts delete mode 100644 samples/grids/grid/remote-paging-data/src/index.css delete mode 100644 samples/grids/grid/remote-paging-data/src/index.tsx delete mode 100644 samples/grids/grid/remote-paging-data/src/react-app-env.d.ts delete mode 100644 samples/grids/grid/remote-paging-data/tsconfig.json diff --git a/samples/grids/grid/remote-paging-data/.eslintrc.js b/samples/grids/grid/remote-paging-data/.eslintrc.js deleted file mode 100644 index 9d283f6407..0000000000 --- a/samples/grids/grid/remote-paging-data/.eslintrc.js +++ /dev/null @@ -1,76 +0,0 @@ -// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project -module.exports = { - parser: "@typescript-eslint/parser", // Specifies the ESLint parser - parserOptions: { - ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features - sourceType: "module", // Allows for the use of imports - ecmaFeatures: { - jsx: true // Allows for the parsing of JSX - } - }, - settings: { - react: { - version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use - } - }, - extends: [ - "eslint:recommended", - "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react - "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin - ], - rules: { - // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs - "default-case": "off", - "jsx-a11y/alt-text": "off", - "jsx-a11y/iframe-has-title": "off", - "no-undef": "off", - "no-unused-vars": "off", - "no-extend-native": "off", - "no-throw-literal": "off", - "no-useless-concat": "off", - "no-mixed-operators": "off", - "no-prototype-builtins": "off", - "prefer-const": "off", - "prefer-rest-params": "off", - "@typescript-eslint/no-unused-vars": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-inferrable-types": "off", - "@typescript-eslint/no-useless-constructor": "off", - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/interface-name-prefix": "off", - "@typescript-eslint/prefer-namespace-keyword": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/explicit-module-boundary-types": "off" - }, - "overrides": [ - { - "files": ["*.ts", "*.tsx"], - "rules": { - "default-case": "off", - "jsx-a11y/alt-text": "off", - "jsx-a11y/iframe-has-title": "off", - "no-var": "off", - "no-undef": "off", - "no-unused-vars": "off", - "no-extend-native": "off", - "no-throw-literal": "off", - "no-useless-concat": "off", - "no-mixed-operators": "off", - "no-prototype-builtins": "off", - "prefer-const": "off", - "prefer-rest-params": "off", - "@typescript-eslint/no-unused-vars": "off", - "@typescript-eslint/no-explicit-any": "off", - "@typescript-eslint/no-inferrable-types": "off", - "@typescript-eslint/no-useless-constructor": "off", - "@typescript-eslint/no-use-before-define": "off", - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/interface-name-prefix": "off", - "@typescript-eslint/prefer-namespace-keyword": "off", - "@typescript-eslint/explicit-function-return-type": "off", - "@typescript-eslint/explicit-module-boundary-types": "off" - } - } - ] - }; \ No newline at end of file diff --git a/samples/grids/grid/remote-paging-data/ReadMe.md b/samples/grids/grid/remote-paging-data/ReadMe.md deleted file mode 100644 index 293b5455d0..0000000000 --- a/samples/grids/grid/remote-paging-data/ReadMe.md +++ /dev/null @@ -1,56 +0,0 @@ - - - -This folder contains implementation of React application with example of Remote Paging Data 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/remote-paging-data -``` - -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/remote-paging-data/package.json b/samples/grids/grid/remote-paging-data/package.json deleted file mode 100644 index a7ac896614..0000000000 --- a/samples/grids/grid/remote-paging-data/package.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "name": "example-ignite-ui-react", - "description": "This project provides example of using Ignite UI for React components", - "author": "Infragistics", - "version": "1.4.0", - "license": "", - "homepage": ".", - "private": true, - "scripts": { - "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", - "build": "react-scripts --max_old_space_size=10240 build ", - "test": "react-scripts test --env=jsdom", - "eject": "react-scripts eject", - "lint": "eslint ./src/**/*.{ts,tsx}" - }, - "dependencies": { - "igniteui-dockmanager": "1.14.3", - "igniteui-react": "18.7.0-beta.2", - "igniteui-react-core": "18.7.0-beta.2", - "igniteui-react-datasources": "18.7.0-beta.2", - "igniteui-react-grids": "18.7.0-beta.2", - "igniteui-react-inputs": "18.7.0-beta.2", - "igniteui-react-layouts": "18.7.0-beta.2", - "igniteui-webcomponents": "5.0.0", - "lit-html": "^2.2.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-scripts": "^5.0.1", - "tslib": "^2.4.0" - }, - "devDependencies": { - "@types/jest": "^29.2.0", - "@types/node": "^18.11.7", - "@types/react": "^18.0.24", - "@types/react-dom": "^18.0.8", - "eslint": "^8.33.0", - "eslint-config-react": "^1.1.7", - "eslint-plugin-react": "^7.20.0", - "react-app-rewired": "^2.2.1", - "typescript": "^4.8.4", - "worker-loader": "^3.0.8" - }, - "browserslist": [ - ">0.2%", - "not dead", - "not ie <= 11", - "not op_mini all" - ] -} diff --git a/samples/grids/grid/remote-paging-data/public/index.html b/samples/grids/grid/remote-paging-data/public/index.html deleted file mode 100644 index e2d3265576..0000000000 --- a/samples/grids/grid/remote-paging-data/public/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - Sample | Ignite UI | React | infragistics - - - - -
- - \ No newline at end of file diff --git a/samples/grids/grid/remote-paging-data/sandbox.config.json b/samples/grids/grid/remote-paging-data/sandbox.config.json deleted file mode 100644 index 07f53508eb..0000000000 --- a/samples/grids/grid/remote-paging-data/sandbox.config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "infiniteLoopProtection": false, - "hardReloadOnChange": false, - "view": "browser" -} \ No newline at end of file diff --git a/samples/grids/grid/remote-paging-data/src/NwindData.ts b/samples/grids/grid/remote-paging-data/src/NwindData.ts deleted file mode 100644 index f59afd0b79..0000000000 --- a/samples/grids/grid/remote-paging-data/src/NwindData.ts +++ /dev/null @@ -1,550 +0,0 @@ -export class NwindDataItem { - public constructor(init: Partial) { - Object.assign(this, init); - } - - public ProductID: number; - public ProductName: string; - public SupplierID: number; - public CategoryID: number; - public QuantityPerUnit: string; - public UnitPrice: number; - public UnitsInStock: number; - public UnitsOnOrder: number; - public ReorderLevel: number; - public Discontinued: boolean; - public OrderDate: string; - public Rating: number; - public Locations: NwindDataItem_LocationsItem[]; - -} -export class NwindDataItem_LocationsItem { - public constructor(init: Partial) { - Object.assign(this, init); - } - - public Shop: string; - public LastInventory: string; - -} -export class NwindData extends Array { - public constructor(items: Array | number = -1) { - if (Array.isArray(items)) { - super(...items); - } else { - const newItems = [ - new NwindDataItem( - { - ProductID: 1, - ProductName: `Chai`, - SupplierID: 1, - CategoryID: 1, - QuantityPerUnit: `10 boxes x 20 bags`, - UnitPrice: 18, - UnitsInStock: 39, - UnitsOnOrder: 30, - ReorderLevel: 10, - Discontinued: false, - OrderDate: `2012-02-12`, - Rating: 5, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Fun-Tasty Co.`, - LastInventory: `2018-06-12` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - })] - - }), - new NwindDataItem( - { - ProductID: 2, - ProductName: `Chang`, - SupplierID: 1, - CategoryID: 1, - QuantityPerUnit: `24 - 12 oz bottles`, - UnitPrice: 19, - UnitsInStock: 17, - UnitsOnOrder: 40, - ReorderLevel: 25, - Discontinued: true, - OrderDate: `2003-03-17`, - Rating: 5, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Super Market`, - LastInventory: `2018-09-09` - })] - - }), - new NwindDataItem( - { - ProductID: 3, - ProductName: `Aniseed Syrup`, - SupplierID: 1, - CategoryID: 2, - QuantityPerUnit: `12 - 550 ml bottles`, - UnitPrice: 10, - UnitsInStock: 13, - UnitsOnOrder: 70, - ReorderLevel: 25, - Discontinued: false, - OrderDate: `2006-03-17`, - Rating: 3, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Street Market`, - LastInventory: `2018-12-12` - }), - new NwindDataItem_LocationsItem( - { - Shop: `24/7 Market`, - LastInventory: `2018-11-11` - })] - - }), - new NwindDataItem( - { - ProductID: 4, - ProductName: `Chef Antons Cajun Seasoning`, - SupplierID: 2, - CategoryID: 2, - QuantityPerUnit: `48 - 6 oz jars`, - UnitPrice: 22, - UnitsInStock: 53, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: false, - OrderDate: `2016-03-17`, - Rating: 3, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Fun-Tasty Co.`, - LastInventory: `2018-06-12` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Street Market`, - LastInventory: `2018-12-12` - })] - - }), - new NwindDataItem( - { - ProductID: 5, - ProductName: `Chef Antons Gumbo Mix`, - SupplierID: 2, - CategoryID: 2, - QuantityPerUnit: `36 boxes`, - UnitPrice: 21.35, - UnitsInStock: 0, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: true, - OrderDate: `2011-11-11`, - Rating: 5, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Super Market`, - LastInventory: `2018-09-09` - })] - - }), - new NwindDataItem( - { - ProductID: 6, - ProductName: `Grandmas Boysenberry Spread`, - SupplierID: 3, - CategoryID: 2, - QuantityPerUnit: `12 - 8 oz jars`, - UnitPrice: 25, - UnitsInStock: 0, - UnitsOnOrder: 30, - ReorderLevel: 25, - Discontinued: false, - OrderDate: `2017-12-17`, - Rating: 4, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Super Market`, - LastInventory: `2018-09-09` - })] - - }), - new NwindDataItem( - { - ProductID: 7, - ProductName: `Uncle Bobs Organic Dried Pears`, - SupplierID: 3, - CategoryID: 7, - QuantityPerUnit: `12 - 1 lb pkgs.`, - UnitPrice: 30, - UnitsInStock: 150, - UnitsOnOrder: 30, - ReorderLevel: 10, - Discontinued: false, - OrderDate: `2016-07-17`, - Rating: 5, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Fun-Tasty Co.`, - LastInventory: `2018-06-12` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Street Market`, - LastInventory: `2018-12-12` - })] - - }), - new NwindDataItem( - { - ProductID: 8, - ProductName: `Northwoods Cranberry Sauce`, - SupplierID: 3, - CategoryID: 2, - QuantityPerUnit: `12 - 12 oz jars`, - UnitPrice: 40, - UnitsInStock: 6, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: false, - OrderDate: `2018-01-17`, - Rating: 4, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Fun-Tasty Co.`, - LastInventory: `2018-06-12` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - })] - - }), - new NwindDataItem( - { - ProductID: 9, - ProductName: `Mishi Kobe Niku`, - SupplierID: 4, - CategoryID: 6, - QuantityPerUnit: `18 - 500 g pkgs.`, - UnitPrice: 97, - UnitsInStock: 29, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: true, - OrderDate: `2010-02-17`, - Rating: 4, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - })] - - }), - new NwindDataItem( - { - ProductID: 10, - ProductName: `Ikura`, - SupplierID: 4, - CategoryID: 8, - QuantityPerUnit: `12 - 200 ml jars`, - UnitPrice: 31, - UnitsInStock: 31, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: false, - OrderDate: `2008-05-17`, - Rating: 3, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Wall Market`, - LastInventory: `2018-12-06` - })] - - }), - new NwindDataItem( - { - ProductID: 11, - ProductName: `Queso Cabrales`, - SupplierID: 5, - CategoryID: 4, - QuantityPerUnit: `1 kg pkg.`, - UnitPrice: 21, - UnitsInStock: 22, - UnitsOnOrder: 30, - ReorderLevel: 30, - Discontinued: false, - OrderDate: `2009-01-17`, - Rating: 5, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Fun-Tasty Co.`, - LastInventory: `2018-06-12` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - })] - - }), - new NwindDataItem( - { - ProductID: 12, - ProductName: `Queso Manchego La Pastora`, - SupplierID: 5, - CategoryID: 4, - QuantityPerUnit: `10 - 500 g pkgs.`, - UnitPrice: 38, - UnitsInStock: 86, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: false, - OrderDate: `2015-11-17`, - Rating: 3, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - })] - - }), - new NwindDataItem( - { - ProductID: 13, - ProductName: `Konbu`, - SupplierID: 6, - CategoryID: 8, - QuantityPerUnit: `2 kg box`, - UnitPrice: 6, - UnitsInStock: 24, - UnitsOnOrder: 30, - ReorderLevel: 5, - Discontinued: false, - OrderDate: `2015-03-17`, - Rating: 2, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Super Market`, - LastInventory: `2018-09-09` - })] - - }), - new NwindDataItem( - { - ProductID: 14, - ProductName: `Tofu`, - SupplierID: 6, - CategoryID: 7, - QuantityPerUnit: `40 - 100 g pkgs.`, - UnitPrice: 23.25, - UnitsInStock: 35, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: false, - OrderDate: `2017-06-17`, - Rating: 4, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Street Market`, - LastInventory: `2018-12-12` - })] - - }), - new NwindDataItem( - { - ProductID: 15, - ProductName: `Genen Shouyu`, - SupplierID: 6, - CategoryID: 2, - QuantityPerUnit: `24 - 250 ml bottles`, - UnitPrice: 15.5, - UnitsInStock: 39, - UnitsOnOrder: 30, - ReorderLevel: 5, - Discontinued: false, - OrderDate: `2014-03-17`, - Rating: 4, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Local Market`, - LastInventory: `2018-07-03` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Wall Market`, - LastInventory: `2018-12-06` - })] - - }), - new NwindDataItem( - { - ProductID: 16, - ProductName: `Pavlova`, - SupplierID: 7, - CategoryID: 3, - QuantityPerUnit: `32 - 500 g boxes`, - UnitPrice: 17.45, - UnitsInStock: 29, - UnitsOnOrder: 30, - ReorderLevel: 10, - Discontinued: false, - OrderDate: `2018-03-28`, - Rating: 2, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Street Market`, - LastInventory: `2018-12-12` - }), - new NwindDataItem_LocationsItem( - { - Shop: `24/7 Market`, - LastInventory: `2018-11-11` - })] - - }), - new NwindDataItem( - { - ProductID: 17, - ProductName: `Alice Mutton`, - SupplierID: 7, - CategoryID: 6, - QuantityPerUnit: `20 - 1 kg tins`, - UnitPrice: 39, - UnitsInStock: 0, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: true, - OrderDate: `2015-08-17`, - Rating: 2, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Farmer Market`, - LastInventory: `2018-04-04` - })] - - }), - new NwindDataItem( - { - ProductID: 18, - ProductName: `Carnarvon Tigers`, - SupplierID: 7, - CategoryID: 8, - QuantityPerUnit: `16 kg pkg.`, - UnitPrice: 62.5, - UnitsInStock: 42, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: false, - OrderDate: `2005-09-27`, - Rating: 2, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `24/7 Market`, - LastInventory: `2018-11-11` - }), - new NwindDataItem_LocationsItem( - { - Shop: `Super Market`, - LastInventory: `2018-09-09` - })] - - }), - new NwindDataItem( - { - ProductID: 19, - ProductName: `Teatime Chocolate Biscuits`, - SupplierID: 8, - CategoryID: 3, - QuantityPerUnit: ``, - UnitPrice: 9.2, - UnitsInStock: 25, - UnitsOnOrder: 30, - ReorderLevel: 5, - Discontinued: false, - OrderDate: `2001-03-17`, - Rating: 2, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Local Market`, - LastInventory: `2018-07-03` - })] - - }), - new NwindDataItem( - { - ProductID: 20, - ProductName: `Sir Rodneys Marmalade`, - SupplierID: 8, - CategoryID: 3, - QuantityPerUnit: `4 - 100 ml jars`, - UnitPrice: 4.5, - UnitsInStock: 40, - UnitsOnOrder: 30, - ReorderLevel: 0, - Discontinued: false, - OrderDate: `2005-03-17`, - Rating: 5, - Locations: [ - new NwindDataItem_LocationsItem( - { - Shop: `Super Market`, - LastInventory: `2018-09-09` - })] - - }), - ]; - super(...newItems.slice(0)); - } - } -} diff --git a/samples/grids/grid/remote-paging-data/src/index.css b/samples/grids/grid/remote-paging-data/src/index.css deleted file mode 100644 index 98682b8543..0000000000 --- a/samples/grids/grid/remote-paging-data/src/index.css +++ /dev/null @@ -1,2 +0,0 @@ -/* shared styles are loaded from: */ -/* https://static.infragistics.com/xplatform/css/samples */ diff --git a/samples/grids/grid/remote-paging-data/src/index.tsx b/samples/grids/grid/remote-paging-data/src/index.tsx deleted file mode 100644 index 54198096c9..0000000000 --- a/samples/grids/grid/remote-paging-data/src/index.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; - -import { IgrPropertyEditorPanelModule } from 'igniteui-react-layouts'; -import { IgrGridModule } from 'igniteui-react-grids'; -import { IgrGrid, IgrPaginator, IgrColumn } from 'igniteui-react-grids'; -import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-react-core'; -import { NwindDataItem, NwindDataItem_LocationsItem, NwindData } from './NwindData'; - -import 'igniteui-react-grids/grids/combined'; -import 'igniteui-react-grids/grids/themes/light/bootstrap.css'; - -const mods: any[] = [ - IgrPropertyEditorPanelModule, - 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({}); - } - private iD: IgrColumn - private productName: IgrColumn - private quantityPerUnit: IgrColumn - private unitPrice: IgrColumn - private orderDate: IgrColumn - private discontinued: IgrColumn - - constructor(props: any) { - super(props); - - this.gridRef = this.gridRef.bind(this); - } - - public render(): JSX.Element { - return ( -
- -
- - - - - - - - - - - - - - - - -
-
- ); - } - - private _nwindData: NwindData = null; - public get nwindData(): NwindData { - if (this._nwindData == null) - { - this._nwindData = new NwindData(); - } - return this._nwindData; - } - - private _componentRenderer: ComponentRenderer = null; - public get renderer(): ComponentRenderer { - if (this._componentRenderer == null) { - this._componentRenderer = new ComponentRenderer(); - var context = this._componentRenderer.context; - PropertyEditorPanelDescriptionModule.register(context); - WebGridDescriptionModule.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/grid/remote-paging-data/src/react-app-env.d.ts b/samples/grids/grid/remote-paging-data/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5fc6..0000000000 --- a/samples/grids/grid/remote-paging-data/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/samples/grids/grid/remote-paging-data/tsconfig.json b/samples/grids/grid/remote-paging-data/tsconfig.json deleted file mode 100644 index 42c6ace1da..0000000000 --- a/samples/grids/grid/remote-paging-data/tsconfig.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "compilerOptions": { - "resolveJsonModule": true, - "esModuleInterop": true, - "baseUrl": ".", - "outDir": "build/dist", - "module": "esnext", - "target": "es5", - "lib": [ - "es6", - "dom" - ], - "sourceMap": true, - "allowJs": true, - "jsx": "react-jsx", - "moduleResolution": "node", - "rootDir": "src", - "forceConsistentCasingInFileNames": true, - "noImplicitReturns": true, - "noImplicitThis": true, - "noImplicitAny": true, - "noUnusedLocals": false, - "importHelpers": true, - "suppressImplicitAnyIndexErrors": true, - "allowSyntheticDefaultImports": true, - "skipLibCheck": true, - "strict": false, - "isolatedModules": true, - "noEmit": true - }, - "exclude": [ - "node_modules", - "build", - "scripts", - "acceptance-tests", - "webpack", - "jest", - "src/setupTests.ts", - "**/odatajs-4.0.0.js", - "config-overrides.js" - ], - "include": [ - "src" - ] -} From 584eb73c7967189fc233b44525cec053f5786806 Mon Sep 17 00:00:00 2001 From: ttonev Date: Tue, 24 Sep 2024 15:38:11 +0300 Subject: [PATCH 5/5] docs(grid): removed perPage from constructor --- samples/grids/grid/remote-paging-grid/src/index.tsx | 4 ++-- .../grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/samples/grids/grid/remote-paging-grid/src/index.tsx b/samples/grids/grid/remote-paging-grid/src/index.tsx index 4d6b67a207..e2e6bd74c3 100644 --- a/samples/grids/grid/remote-paging-grid/src/index.tsx +++ b/samples/grids/grid/remote-paging-grid/src/index.tsx @@ -22,13 +22,13 @@ let [perPage, setPerPage] = useState(15); useEffect(() => { if (paginator.current) { - setPerPage(paginator.current.perPage ?? 15); + setPerPage(15); grid.current.isLoading = true; } grid.current.isLoading = true; loadData('Customers'); -}, [page, perPage]); +}, [page, 15]); function loadData(dataKey: string) { const dataState = { key: dataKey }; diff --git a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx index a65cdbe5e1..fd01eb75d4 100644 --- a/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx +++ b/samples/grids/hierarchical-grid/remote-paging-hgrid/src/index.tsx @@ -21,7 +21,7 @@ const [data, setData] = useState([]); useEffect(() => { if (paginator.current) { - setPerPage(paginator.current.perPage ?? perPage); + setPerPage(15); hierarchicalGrid.current.isLoading = true; } @@ -34,7 +34,7 @@ useEffect(() => { hierarchicalGrid.current.markForCheck(); } ); -}, [page, perPage]); +}, [page, 15]); function gridCreated( rowIsland: IgrRowIsland,